Configuration
- `server`, `database`, `security`, and `performance` keys live in `dbal/cpp/config/production.yaml`. Credentials reference environment secrets, while audit paths are write-only.
+ `server`, `database`, `security`, and `performance` keys live in `dbal/production/config/production.yaml`. Credentials reference environment secrets, while audit paths are write-only.
diff --git a/frontends/nextjs/eslint-plugins/README.md b/frontends/nextjs/eslint-plugins/README.md
new file mode 100644
index 000000000..5bc6cf596
--- /dev/null
+++ b/frontends/nextjs/eslint-plugins/README.md
@@ -0,0 +1,135 @@
+# ESLint Plugins for MetaBuilder
+
+Custom ESLint plugins to enforce architectural patterns and best practices.
+
+## Atomic Design Rules
+
+**File:** `atomic-design-rules.js`
+
+Enforces atomic design hierarchy to prevent upward dependencies.
+
+### Rules
+
+#### `atomic-design/no-upward-imports`
+
+Prevents components from importing higher-level components in the atomic design hierarchy:
+
+- **Atoms** cannot import from **molecules** or **organisms**
+- **Molecules** cannot import from **organisms**
+
+**Severity:** `error`
+
+**Why?** This ensures the component hierarchy remains clean and prevents circular dependencies. Atoms should be the most fundamental components, composed only of React and MUI primitives.
+
+### Examples
+
+❌ **Bad** - Atom importing from molecule:
+```typescript
+// frontends/nextjs/src/components/atoms/Button.tsx
+import { FormField } from '@/components/molecules/FormField' // ERROR!
+```
+
+❌ **Bad** - Atom importing from organism:
+```typescript
+// frontends/nextjs/src/components/atoms/Input.tsx
+import { DataTable } from '@/components/organisms/DataTable' // ERROR!
+```
+
+❌ **Bad** - Molecule importing from organism:
+```typescript
+// frontends/nextjs/src/components/molecules/FormField.tsx
+import { UserManagement } from '@/components/organisms/UserManagement' // ERROR!
+```
+
+✅ **Good** - Atom using only MUI:
+```typescript
+// frontends/nextjs/src/components/atoms/Button.tsx
+import { Button as MuiButton } from '@mui/material'
+```
+
+✅ **Good** - Molecule using atoms:
+```typescript
+// frontends/nextjs/src/components/molecules/FormField.tsx
+import { Label, Input } from '@/components/atoms'
+```
+
+✅ **Good** - Organism using atoms and molecules:
+```typescript
+// frontends/nextjs/src/components/organisms/UserForm.tsx
+import { Button, Input } from '@/components/atoms'
+import { FormField } from '@/components/molecules'
+```
+
+### Testing the Rule
+
+Run ESLint on your components:
+
+```bash
+cd frontends/nextjs
+
+# Check all atoms
+npx eslint src/components/atoms/**/*.tsx
+
+# Check all molecules
+npx eslint src/components/molecules/**/*.tsx
+```
+
+### Disabling the Rule (Not Recommended)
+
+If you have a legitimate exception, you can disable the rule for a specific line:
+
+```typescript
+// eslint-disable-next-line atomic-design/no-upward-imports
+import { SpecialComponent } from '@/components/organisms/SpecialComponent'
+```
+
+However, this should be avoided. If you find yourself needing to disable this rule, consider:
+1. Is your component in the right category?
+2. Can you refactor the code to avoid the upward dependency?
+3. Should the imported component be moved to a lower level?
+
+## Adding New Rules
+
+To add a new custom rule:
+
+1. Create a new file in `eslint-plugins/` with your rule logic
+2. Import and register the plugin in `eslint.config.js`
+3. Add documentation here
+4. Test the rule with example violations
+
+### Rule Template
+
+```javascript
+export default {
+ rules: {
+ 'my-rule-name': {
+ meta: {
+ type: 'problem', // or 'suggestion', 'layout'
+ docs: {
+ description: 'Description of the rule',
+ category: 'Best Practices',
+ recommended: true,
+ },
+ messages: {
+ myMessage: 'Error message with {{variable}} placeholders',
+ },
+ schema: [], // JSON schema for rule options
+ },
+ create(context) {
+ return {
+ // AST node visitors
+ ImportDeclaration(node) {
+ // Rule logic
+ },
+ }
+ },
+ },
+ },
+}
+```
+
+## Resources
+
+- [ESLint Custom Rules Guide](https://eslint.org/docs/latest/extend/custom-rules)
+- [ESTree AST Spec](https://github.com/estree/estree)
+- [Atomic Design Principles](https://atomicdesign.bradfrost.com/)
diff --git a/frontends/nextjs/eslint-plugins/atomic-design-rules.js b/frontends/nextjs/eslint-plugins/atomic-design-rules.js
new file mode 100644
index 000000000..4a74adf10
--- /dev/null
+++ b/frontends/nextjs/eslint-plugins/atomic-design-rules.js
@@ -0,0 +1,67 @@
+/**
+ * ESLint plugin to enforce atomic design hierarchy rules
+ *
+ * Rules:
+ * - Atoms cannot import from molecules or organisms
+ * - Molecules cannot import from organisms
+ */
+
+export default {
+ rules: {
+ 'no-upward-imports': {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'Prevent atoms from importing molecules/organisms and molecules from importing organisms',
+ category: 'Best Practices',
+ recommended: true,
+ },
+ messages: {
+ atomImportsMolecule: 'Atoms cannot import from molecules. Atoms should only use MUI and React primitives.',
+ atomImportsOrganism: 'Atoms cannot import from organisms. Atoms should only use MUI and React primitives.',
+ moleculeImportsOrganism: 'Molecules cannot import from organisms. Molecules should only import atoms.',
+ },
+ schema: [],
+ },
+ create(context) {
+ const filename = context.getFilename()
+
+ // Determine component level based on file path
+ const isAtom = filename.includes('/atoms/')
+ const isMolecule = filename.includes('/molecules/')
+
+ return {
+ ImportDeclaration(node) {
+ const importPath = node.source.value
+
+ // Check if atom is importing from molecule or organism
+ if (isAtom) {
+ if (importPath.includes('molecules') || importPath.includes('@/components/molecules')) {
+ context.report({
+ node,
+ messageId: 'atomImportsMolecule',
+ })
+ }
+ if (importPath.includes('organisms') || importPath.includes('@/components/organisms')) {
+ context.report({
+ node,
+ messageId: 'atomImportsOrganism',
+ })
+ }
+ }
+
+ // Check if molecule is importing from organism
+ if (isMolecule) {
+ if (importPath.includes('organisms') || importPath.includes('@/components/organisms')) {
+ context.report({
+ node,
+ messageId: 'moleculeImportsOrganism',
+ })
+ }
+ }
+ },
+ }
+ },
+ },
+ },
+}
diff --git a/frontends/nextjs/eslint.config.js b/frontends/nextjs/eslint.config.js
index 75822d7b5..77bf89531 100644
--- a/frontends/nextjs/eslint.config.js
+++ b/frontends/nextjs/eslint.config.js
@@ -3,9 +3,10 @@ import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
+import atomicDesignRules from './eslint-plugins/atomic-design-rules.js'
export default tseslint.config(
- { ignores: ['dist', 'node_modules', 'packages/*/dist', 'packages/*/node_modules', '.next/**', 'coverage/**', 'next-env.d.ts', 'prisma.config.ts'] },
+ { ignores: ['dist', 'node_modules', 'packages/*/dist', 'packages/*/node_modules', '.next/**', 'coverage/**', 'next-env.d.ts', 'prisma.config.ts', 'playwright.dbal-daemon.config.ts'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
@@ -20,6 +21,7 @@ export default tseslint.config(
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
+ 'atomic-design': atomicDesignRules,
},
rules: {
...reactHooks.configs.recommended.rules,
@@ -40,6 +42,8 @@ export default tseslint.config(
'no-debugger': 'error',
'prefer-const': 'error',
'no-var': 'error',
+ // Atomic design rules
+ 'atomic-design/no-upward-imports': 'error',
},
},
)
diff --git a/frontends/nextjs/package.json b/frontends/nextjs/package.json
index 6aa461dff..e3dc2b268 100644
--- a/frontends/nextjs/package.json
+++ b/frontends/nextjs/package.json
@@ -47,15 +47,15 @@
"db:generate": "prisma generate",
"db:push": "prisma db push",
"db:migrate": "prisma migrate deploy",
- "cpp:check": "node dbal/tools/cpp-build-assistant.cjs check",
- "cpp:init": "node dbal/tools/cpp-build-assistant.cjs init",
- "cpp:install": "node dbal/tools/cpp-build-assistant.cjs install",
- "cpp:configure": "node dbal/tools/cpp-build-assistant.cjs configure",
- "cpp:build": "node dbal/tools/cpp-build-assistant.cjs build",
- "cpp:test": "node dbal/tools/cpp-build-assistant.cjs test",
- "cpp:clean": "node dbal/tools/cpp-build-assistant.cjs clean",
- "cpp:rebuild": "node dbal/tools/cpp-build-assistant.cjs rebuild",
- "cpp:full": "node dbal/tools/cpp-build-assistant.cjs full",
+ "cpp:check": "node dbal/shared/tools/cpp-build-assistant.cjs check",
+ "cpp:init": "node dbal/shared/tools/cpp-build-assistant.cjs init",
+ "cpp:install": "node dbal/shared/tools/cpp-build-assistant.cjs install",
+ "cpp:configure": "node dbal/shared/tools/cpp-build-assistant.cjs configure",
+ "cpp:build": "node dbal/shared/tools/cpp-build-assistant.cjs build",
+ "cpp:test": "node dbal/shared/tools/cpp-build-assistant.cjs test",
+ "cpp:clean": "node dbal/shared/tools/cpp-build-assistant.cjs clean",
+ "cpp:rebuild": "node dbal/shared/tools/cpp-build-assistant.cjs rebuild",
+ "cpp:full": "node dbal/shared/tools/cpp-build-assistant.cjs full",
"screenshot": "npx playwright install chromium && npx tsx scripts/capture-screenshot.ts"
},
"dependencies": {
diff --git a/frontends/nextjs/scripts/check-function-coverage.js b/frontends/nextjs/scripts/check-function-coverage.js
index 26690d93b..f5385005c 120000
--- a/frontends/nextjs/scripts/check-function-coverage.js
+++ b/frontends/nextjs/scripts/check-function-coverage.js
@@ -1 +1 @@
-../../../tools/check-function-coverage.js
\ No newline at end of file
+../../../tools/quality/code/check-function-coverage.js
\ No newline at end of file
diff --git a/frontends/nextjs/scripts/generate-test-coverage-report.js b/frontends/nextjs/scripts/generate-test-coverage-report.js
index a9b98796e..24dffecb0 120000
--- a/frontends/nextjs/scripts/generate-test-coverage-report.js
+++ b/frontends/nextjs/scripts/generate-test-coverage-report.js
@@ -1 +1 @@
-../../../tools/generate-test-coverage-report.js
\ No newline at end of file
+../../../tools/generation/generate-test-coverage-report.js
\ No newline at end of file
diff --git a/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx b/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
index 48bcce1aa..ee56df809 100644
--- a/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
+++ b/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
@@ -37,7 +37,7 @@ type FormState = (typeof initialFormState)
type FetchStatus = 'idle' | 'loading' | 'success'
const createFilename = (header: string | null, fallback: string) => {
- const match = header?.match(/filename="?([^\"]+)"?/) ?? null
+ const match = header?.match(/filename="?([^"]+)"?/) ?? null
return match ? match[1] : fallback
}
diff --git a/frontends/nextjs/src/components/editors/CodeEditor.tsx b/frontends/nextjs/src/components/editors/CodeEditor.tsx
index 2cf484e97..1def8c9bd 100644
--- a/frontends/nextjs/src/components/editors/CodeEditor.tsx
+++ b/frontends/nextjs/src/components/editors/CodeEditor.tsx
@@ -5,7 +5,7 @@ import { Alert, AlertDescription } from '@/components/ui'
import Editor from '@monaco-editor/react'
import { FloppyDisk, X, ShieldCheck, Warning } from '@phosphor-icons/react'
import { securityScanner, type SecurityScanResult } from '@/lib/security-scanner'
-import { SecurityWarningDialog } from '@/components/SecurityWarningDialog'
+import { SecurityWarningDialog } from '@/components/organisms/security/SecurityWarningDialog'
import { toast } from 'sonner'
interface CodeEditorProps {
diff --git a/frontends/nextjs/src/components/editors/JsonEditor.tsx b/frontends/nextjs/src/components/editors/JsonEditor.tsx
index cae15d8c6..7b6beb59a 100644
--- a/frontends/nextjs/src/components/editors/JsonEditor.tsx
+++ b/frontends/nextjs/src/components/editors/JsonEditor.tsx
@@ -5,7 +5,7 @@ import { Alert, AlertDescription } from '@/components/ui'
import { FloppyDisk, X, Warning, ShieldCheck } from '@phosphor-icons/react'
import Editor from '@monaco-editor/react'
import { securityScanner, type SecurityScanResult } from '@/lib/security-scanner'
-import { SecurityWarningDialog } from '@/components/SecurityWarningDialog'
+import { SecurityWarningDialog } from '@/components/organisms/security/SecurityWarningDialog'
import { toast } from 'sonner'
interface JsonEditorProps {
diff --git a/frontends/nextjs/src/components/editors/lua/LuaEditor.tsx b/frontends/nextjs/src/components/editors/lua/LuaEditor.tsx
index 7fd2df4f6..90909ce67 100644
--- a/frontends/nextjs/src/components/editors/lua/LuaEditor.tsx
+++ b/frontends/nextjs/src/components/editors/lua/LuaEditor.tsx
@@ -22,7 +22,7 @@ import { useMonaco } from '@monaco-editor/react'
import { LuaSnippetLibrary } from '@/components/editors/lua/LuaSnippetLibrary'
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui'
import { securityScanner, type SecurityScanResult } from '@/lib/security-scanner'
-import { SecurityWarningDialog } from '@/components/dialogs/SecurityWarningDialog'
+import { SecurityWarningDialog } from '@/components/organisms/security/SecurityWarningDialog'
interface LuaEditorProps {
scripts: LuaScript[]
diff --git a/frontends/nextjs/src/components/molecules/README.md b/frontends/nextjs/src/components/molecules/README.md
index 63cd03d7e..b3ff4d471 100644
--- a/frontends/nextjs/src/components/molecules/README.md
+++ b/frontends/nextjs/src/components/molecules/README.md
@@ -15,6 +15,10 @@ Molecules are simple groups of atoms that function together as a cohesive unit.
| `DropdownMenu` | Context/action menu | Menu, MenuItem |
| `FormField` | Label + input + error | Label, Input |
| `SearchInput` | Input with search icon | TextField |
+| `PasswordField` | Password input with visibility toggle | TextField, IconButton |
+| `EmailField` | Email input with icon | TextField, InputAdornment |
+| `NumberField` | Number input with constraints | TextField |
+| `SearchBar` | Search input with clear and filter buttons | TextField, IconButton |
| `Popover` | Floating content panel | MuiPopover |
### Application Molecules
@@ -27,7 +31,11 @@ Molecules are simple groups of atoms that function together as a cohesive unit.
## Usage
```typescript
-import { Card, CardHeader, CardContent, Dialog, Alert } from '@/components/molecules'
+import {
+ Card, CardHeader, CardContent,
+ Dialog, Alert,
+ PasswordField, EmailField, NumberField, SearchBar
+} from '@/components/molecules'
function MyPage() {
return (
@@ -44,6 +52,35 @@ function MyPage() {