@qvaroo/configs 1.0.4 → 1.0.6

package/README.md

@@ -27,39 +27,59 @@ npm install --save-dev eslint prettier typescript
 
 ## 🚀 Quick Setup
 
-### 1. ESLint Configuration
+### 1. ESLint Configuration (New Flat Config)
+Create `eslint.config.mjs` in your project root:
 
-Create `.eslintrc.js` in your project root:
-
-**For React/Next.js projects:**
 ```javascript
-module.exports = {
-  extends: ['./node_modules/@qvaroo/configs/eslint/react.js'],
-  parserOptions: {
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-  },
-};
+import { createRequire } from 'module';
+const require = createRequire(import.meta.url);
+
+// 1. Plugins (must be explicitly imported and registered in Flat Config)
+const spellcheckPlugin = require('eslint-plugin-spellcheck');
+const sonarjsPlugin = require('eslint-plugin-sonarjs');
+
+// 2. Qvaroo Configs
+const { 
+    namingConventions, 
+    codeQuality,
+    spellcheck
+} = require('@qvaroo/configs');
+
+export default [
+    {
+        files: ['**/*.{ts,tsx}'],
+        
+        // 3. Register Plugins
+        plugins: {
+            'spellcheck': spellcheckPlugin,
+            'sonarjs': sonarjsPlugin
+        },
+
+        // 4. Apply Rules
+        rules: {
+            ...namingConventions,
+            ...codeQuality,
+            ...spellcheck
+        },
+        
+        // 5. TypeScript Parser Config (Required for type-aware rules)
+        languageOptions: {
+            parserOptions: {
+                project: true,
+                tsconfigRootDir: import.meta.dirname,
+            },
+        },
+    },
+];
 ```
 
-**For Node.js/Backend projects:**
-```javascript
-module.exports = {
-  extends: ['./node_modules/@qvaroo/configs/eslint/node.js'],
-  parserOptions: {
-    project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
-  },
-};
-```
-
-**For base TypeScript projects:**
+** Legacy Config (.eslintrc.js):**
+If you are still using the legacy config system:
 ```javascript
 module.exports = {
   extends: ['./node_modules/@qvaroo/configs/eslint/index.js'],
   parserOptions: {
     project: './tsconfig.json',
-    tsconfigRootDir: __dirname,
   },
 };
 ```
@@ -137,38 +157,7 @@ Create `tsconfig.json`:
 
 ---
 
-## 🏗️ Folder Structure Enforcement
 
-Required project structure:
-
-```
-src/
-├── api/          # API clients & endpoints
-├── components/   # Reusable UI components
-├── services/     # Business logic layer
-├── events/       # Event handlers & emitters
-├── animations/   # Animation definitions
-├── styles/       # Global styles & themes
-├── hooks/        # Custom React hooks
-├── views/        # Page-level components (presentation only)
-├── types/        # TypeScript interfaces & types
-├── constants/    # Application constants
-└── utils/        # Utility functions
-```
-
-### Boundary Rules
-
-| Layer | Can Import From |
-|-------|-----------------|
-| `views` | components, styles, hooks, animations, constants |
-| `components` | components, styles, hooks, utils, types, animations |
-| `hooks` | services, api, types, utils |
-| `services` | api, types, utils, constants |
-| `api` | types, utils, constants |
-
-> ⚠️ **Views cannot import from `api` or `services` directly!** Use hooks instead.
-
----
 
 ## ⛔️ Local Enforcement (Pre-commit Hooks)
 
@@ -404,7 +393,6 @@ module.exports = {
 │   └── rules/
 │       ├── naming-conventions.js
 │       ├── code-quality.js
-│       ├── architecture.js
 │       └── spellcheck.js
 ├── prettier/
 │   └── index.js          # Prettier config

package/eslint/index.js

@@ -10,7 +10,6 @@
 
 const namingConventionRules = require('./rules/naming-conventions');
 const codeQualityRules = require('./rules/code-quality');
-const architectureRules = require('./rules/architecture');
 const spellcheckRules = require('./rules/spellcheck');
 
 /** @type {import('eslint').Linter.Config} */
@@ -81,10 +80,7 @@ module.exports = {
         // ═══════════════════════════════════════════════════════════════════════
         ...codeQualityRules,
 
-        // ═══════════════════════════════════════════════════════════════════════
-        // ARCHITECTURE - Folder boundaries and separation of concerns
-        // ═══════════════════════════════════════════════════════════════════════
-        ...architectureRules,
+
 
         // ═══════════════════════════════════════════════════════════════════════
         // SPELLCHECK - Variable name clarity

package/index.d.ts

@@ -5,5 +5,4 @@ export declare const prettier: import('prettier').Config;
 
 export declare const namingConventions: Record<string, any>;
 export declare const codeQuality: Record<string, any>;
-export declare const architecture: Record<string, any>;
 export declare const spellcheck: Record<string, any>;

package/index.js

@@ -12,6 +12,5 @@ module.exports = {
     // Individual Rule Sets
     namingConventions: require('./eslint/rules/naming-conventions'),
     codeQuality: require('./eslint/rules/code-quality'),
-    architecture: require('./eslint/rules/architecture'),
     spellcheck: require('./eslint/rules/spellcheck'),
 };

package/index.mjs

@@ -7,7 +7,6 @@ export const {
     prettier,
     namingConventions,
     codeQuality,
-    architecture,
     spellcheck
 } = cjs;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@qvaroo/configs",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "Centralized Qvaroo coding standards, ESLint, Prettier, and TypeScript configurations for TypeScript frontend projects",
     "main": "index.js",
     "types": "index.d.ts",

package/eslint/rules/architecture.js

@@ -1,152 +0,0 @@
-/**
- * Architecture Rules
- * 
- * Enforces folder structure and separation of concerns:
- * - /api, /components, /services, /events, /animations, /styles
- * - Presentation-only views: No business logic or API calls
- * - Boundary enforcement between layers
- */
-
-module.exports = {
-    // ═══════════════════════════════════════════════════════════════════════
-    // BOUNDARY RULES - Folder separation enforcement
-    // ═══════════════════════════════════════════════════════════════════════
-
-    'boundaries/element-types': [
-        'error',
-        {
-            default: 'disallow',
-            rules: [
-                // Components can import from: styles, types, utils, hooks, components, animations
-                {
-                    from: 'components',
-                    allow: ['components', 'styles', 'types', 'utils', 'hooks', 'animations', 'constants'],
-                },
-
-                // Views can import from: components, styles, types, hooks (NO services, NO api)
-                {
-                    from: 'views',
-                    allow: ['components', 'styles', 'types', 'hooks', 'animations', 'constants'],
-                    disallow: ['api', 'services'], // Presentation-only views
-                },
-
-                // Services can import from: api, types, utils, constants
-                {
-                    from: 'services',
-                    allow: ['api', 'types', 'utils', 'constants', 'services'],
-                },
-
-                // API layer can only import from: types, utils, constants
-                {
-                    from: 'api',
-                    allow: ['types', 'utils', 'constants'],
-                },
-
-                // Hooks can import from: services, api, types, utils
-                {
-                    from: 'hooks',
-                    allow: ['services', 'api', 'types', 'utils', 'constants', 'hooks'],
-                },
-
-                // Events can import from: types, utils
-                {
-                    from: 'events',
-                    allow: ['types', 'utils', 'constants'],
-                },
-
-                // Animations can import from: types, utils, styles
-                {
-                    from: 'animations',
-                    allow: ['types', 'utils', 'styles', 'constants'],
-                },
-
-                // Styles: standalone, no business imports
-                {
-                    from: 'styles',
-                    allow: ['styles', 'constants'],
-                },
-
-                // Utils: standalone, no circular dependencies
-                {
-                    from: 'utils',
-                    allow: ['types', 'constants'],
-                },
-
-                // Types: standalone
-                {
-                    from: 'types',
-                    allow: ['types'],
-                },
-
-                // Constants: standalone
-                {
-                    from: 'constants',
-                    allow: ['types'],
-                },
-            ],
-        },
-    ],
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // IMPORT BOUNDARIES - Prevent circular dependencies
-    // ═══════════════════════════════════════════════════════════════════════
-
-    'import/no-cycle': ['error', { maxDepth: 3 }],
-
-    'import/no-restricted-paths': [
-        'error',
-        {
-            zones: [
-                // Views cannot import directly from API
-                {
-                    target: './src/views',
-                    from: './src/api',
-                    message: 'Views must not import from API directly. Use hooks or services instead.',
-                },
-                // Views cannot import directly from Services
-                {
-                    target: './src/views',
-                    from: './src/services',
-                    message: 'Views must not import from services directly. Use hooks instead.',
-                },
-                // Components cannot import from views (prevent circular)
-                {
-                    target: './src/components',
-                    from: './src/views',
-                    message: 'Components cannot import from views. This creates circular dependencies.',
-                },
-                // Styles cannot import business logic
-                {
-                    target: './src/styles',
-                    from: './src/api',
-                    message: 'Styles must not contain business logic or API dependencies.',
-                },
-                {
-                    target: './src/styles',
-                    from: './src/services',
-                    message: 'Styles must not contain business logic or service dependencies.',
-                },
-            ],
-        },
-    ],
-
-    // ═══════════════════════════════════════════════════════════════════════
-    // FILE NAMING PATTERNS
-    // ═══════════════════════════════════════════════════════════════════════
-
-    // Enforce consistent file naming
-    'unicorn/filename-case': [
-        'error',
-        {
-            cases: {
-                kebabCase: true,    // Regular files: my-component.ts
-                pascalCase: true,   // React components: MyComponent.tsx
-            },
-            ignore: [
-                '^README\\.md$',
-                '^CHANGELOG\\.md$',
-                '^LICENSE$',
-            ],
-        },
-    ],
-};