@synergyerp/frontend-standards 1.0.0

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,79 @@
+## Description
+
+<!-- Provide a clear and concise description of the change. What does this PR do? Why is it needed? -->
+
+## Type of Change
+
+<!-- Mark the relevant option with an [x] -->
+
+- [ ] feat: New feature (non-breaking change adding functionality)
+- [ ] fix: Bug fix (non-breaking change fixing an issue)
+- [ ] security: Security-related fix or improvement
+- [ ] perf: Performance improvement
+- [ ] refactor: Code restructure (neither fixes a bug nor adds a feature)
+- [ ] test: Test additions or updates
+- [ ] docs: Documentation changes only
+- [ ] style: Code style/formatting (no functional change)
+- [ ] chore: Build process, tooling, or dependency changes
+- [ ] ci: CI/CD pipeline changes
+
+## Breaking Change?
+
+<!-- Does this PR introduce a breaking change? -->
+
+- [ ] Yes (describe below)
+- [ ] No
+
+<!-- If Yes, describe the breaking change and migration path: -->
+
+## Testing Done
+
+<!-- Describe what testing was performed. Include commands or screenshots if relevant. -->
+
+- [ ] Unit tests added/updated
+- [ ] Integration tests added/updated
+- [ ] E2E tests added/updated
+- [ ] Manual testing performed (describe below)
+- [ ] No testing required (explain why)
+
+<!-- Manual testing description: -->
+
+## Screenshots / Recordings
+
+<!-- If the change affects the UI, include before/after screenshots or a screen recording. -->
+
+## Modularization Compliance
+
+<!-- Required for all PRs that add or move files. -->
+
+- [ ] All new domain-specific files are in a domain subdirectory (`services/<domain>/`, `hooks/<domain>/`, etc.)
+- [ ] Every domain subdirectory has an `index.ts` barrel file
+- [ ] No flat/orphaned domain files at directory roots
+- [ ] Imports go through barrel files (no deep imports bypassing `index.ts`)
+- [ ] Cross-domain imports only use shared interfaces/types (no direct domain-to-domain imports)
+- [ ] `pnpm check-modularization` passes
+
+## Checklist
+
+<!-- Confirm all items are true before requesting review. -->
+
+- [ ] Code follows project style guidelines (lint passes: `pnpm lint`)
+- [ ] TypeScript type check passes (`pnpm check-types`)
+- [ ] All tests pass (`pnpm test:ci`)
+- [ ] Test coverage meets thresholds (≥80% lines, ≥75% branches)
+- [ ] Self-review of my own code completed
+- [ ] No hardcoded secrets, API keys, or credentials
+- [ ] No `console.log` or `debugger` statements (only `console.warn`/`console.error` allowed)
+- [ ] No commented-out code without explanation
+- [ ] PR title follows conventional commit format
+- [ ] Branch is up to date with `develop` (or `main` if hotfix)
+- [ ] Security implications considered
+- [ ] Accessibility checked (if UI change): color contrast, keyboard navigation, screen reader labels
+
+## Related Issues / Tickets
+
+<!-- Link to any related issues, tickets, or specs. Use "Closes #123" or "Fixes #456" syntax. -->
+
+## Reviewer Notes
+
+<!-- Any specific areas you want the reviewer to focus on? Any context they need? -->

package/.github/workflows/ci-template.yml

@@ -0,0 +1,77 @@
+# This is a TEMPLATE for consumer repos.
+# Copy this to .github/workflows/ci.yml in your project.
+#
+# Consumer repos should USE this as a reference, not directly call it.
+# The actual CI is triggered by the consumer repo's own .github/workflows/ci.yml
+# which installs @aoholdings/frontend-standards and runs the same commands.
+
+name: CI Pipeline (Template)
+
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: '22'
+  PNPM_VERSION: '11'
+
+jobs:
+  quality:
+    name: Quality Checks
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Cache pnpm
+        uses: actions/cache@v4
+        with:
+          key: pnpm-${{ runner.os }}-${{ hashFiles('pnpm-lock.yaml') }}
+          path: ~/.pnpm-store
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint (ESLint + boundaries + no-internal-modules)
+        run: pnpm lint
+
+      - name: Check Modularization (domain structure + barrels)
+        run: pnpm check-modularization
+
+      - name: Validate Commit Messages (anti-bypass for --no-verify)
+        if: github.event_name == 'pull_request'
+        run: pnpm exec commitlint --from origin/${{ github.base_ref }} --to HEAD
+
+      - name: Type Check
+        run: pnpm check-types
+
+      - name: Format Check
+        run: pnpm format:check
+
+      - name: Test with Coverage
+        run: pnpm test:ci
+
+      - name: Security Audit
+        run: pnpm audit --audit-level=high
+
+      - name: Build
+        run: pnpm build
+
+      - uses: codecov/codecov-action@v4
+        if: always()
+        with:
+          files: ./coverage/cobertura-coverage.xml
+          fail_ci_if_error: false

package/.github/workflows/ci.yml

@@ -0,0 +1,43 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+env:
+  NODE_VERSION: '22'
+  PNPM_VERSION: '11'
+
+jobs:
+  validate:
+    name: Validate Standards Package
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+      - name: Format check
+        run: pnpm format:check
+
+      - name: Audit
+        run: pnpm audit --audit-level=high

package/.github/workflows/publish.yml

@@ -0,0 +1,37 @@
+name: Publish to GitHub Packages
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+  workflow_dispatch:
+
+env:
+  NODE_VERSION: '22'
+  PNPM_VERSION: '11'
+
+jobs:
+  publish:
+    name: Publish @synergyerp/frontend-standards
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: ${{ env.PNPM_VERSION }}
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish to npm
+        run: |
+          echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >> ~/.npmrc
+          pnpm publish --no-git-checks

package/.husky/commit-msg

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "📝 Validating commit message..."
+pnpm exec commitlint --edit "$1"

package/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "🔍 Running lint-staged..."
+pnpm exec lint-staged

package/.husky/pre-push

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "🚀 Running pre-push quality checks..."
+pnpm lint && pnpm check-modularization && pnpm check-types && pnpm test:ci

package/.prettierignore

@@ -0,0 +1,11 @@
+node_modules
+dist
+.output
+.vinxi
+build
+coverage
+pnpm-lock.yaml
+package-lock.json
+bun.lockb
+*.gen.ts
+routeTree.gen.ts

package/.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss",
+    "christian-kohler.npm-intellisense",
+    "christian-kohler.path-intellisense"
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,55 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "typescript.preferences.quoteStyle": "single",
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "files.autoSave": "onFocusChange",
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "editor.detectIndentation": false,
+  "editor.renderWhitespace": "boundary",
+  "editor.rulers": [100],
+  "editor.wordWrapColumn": 100,
+  "search.useIgnoreFilesByDefault": true,
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/dist": true,
+    "**/coverage": true,
+    "**/build": true
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[yaml]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package/README.md

@@ -0,0 +1,162 @@
+# @synergyerp/frontend-standards
+
+Shared frontend standards for all AO Holdings frontend projects. Provides unified configurations for ESLint, Prettier, commitlint, Husky Git hooks, TypeScript, Vitest, and modularization enforcement.
+
+## Quick Start
+
+```bash
+pnpm add -D @aoholdings/frontend-standards
+```
+
+## What's Included
+
+| Config         | File                               | Description                                                                                                        |
+| -------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| ESLint v9      | `eslint.config.js`                 | Flat config with naming, imports, React, boundaries, barrel-file enforcement, console/debugger bans, accessibility |
+| Prettier       | `prettier.config.js`               | Shared formatting rules with `prettier-plugin-organize-imports`                                                    |
+| commitlint     | `commitlint.config.js`             | Conventional commit enforcement                                                                                    |
+| TypeScript     | `tsconfig.base.json`               | Strict mode base config with path aliases (`@/*`)                                                                  |
+| Vitest         | `vitest.config.base.ts`            | JSDOM, coverage thresholds (80/75/80/80), per-file enforcement                                                     |
+| VS Code        | `.vscode/`                         | settings.json + extensions.json for consistent editor behavior                                                     |
+| Husky          | `.husky/`                          | pre-commit (lint-staged), commit-msg (commitlint), pre-push (full checks)                                          |
+| Modularization | `scripts/check-modularization.mjs` | Domain structure, barrel file, and flat-file validator                                                             |
+| PR Template    | `.github/PULL_REQUEST_TEMPLATE.md` | Standard PR checklist with modularization compliance                                                               |
+
+## Usage in Consumer Repos
+
+### 1. Install
+
+```bash
+pnpm add -D @aoholdings/frontend-standards
+```
+
+### 2. Configure ESLint
+
+```javascript
+// eslint.config.js
+export { default } from '@aoholdings/frontend-standards';
+```
+
+To extend with project-specific rules:
+
+```javascript
+// eslint.config.js
+import baseConfig from '@aoholdings/frontend-standards';
+
+export default [
+  ...baseConfig,
+  {
+    rules: {
+      // project-specific overrides
+    },
+  },
+];
+```
+
+### 3. Configure TypeScript
+
+```jsonc
+// tsconfig.json
+{
+  "extends": "@aoholdings/frontend-standards/tsconfig.base.json",
+  "compilerOptions": {
+    // project-specific overrides
+  },
+}
+```
+
+### 4. Configure Vitest
+
+```typescript
+// vitest.config.ts
+import baseConfig from '@aoholdings/frontend-standards/vitest.config.base';
+import { defineConfig, mergeConfig } from 'vitest/config';
+
+export default mergeConfig(
+  baseConfig,
+  defineConfig({
+    // project-specific overrides
+  })
+);
+```
+
+### 5. Add Scripts to package.json
+
+```json
+{
+  "scripts": {
+    "prepare": "cp -r node_modules/@aoholdings/frontend-standards/.husky . 2>/dev/null && chmod +x .husky/* 2>/dev/null || true",
+    "lint": "eslint --ext .ts,.tsx --max-warnings 0 .",
+    "lint:fix": "eslint --ext .ts,.tsx . --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,json,css,md}\"",
+    "check-types": "tsc --noEmit",
+    "check-modularization": "node node_modules/@aoholdings/frontend-standards/scripts/check-modularization.mjs",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ci": "vitest run --coverage",
+    "validate": "pnpm lint && pnpm check-modularization && pnpm check-types && pnpm test:ci"
+  },
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": ["eslint --fix --max-warnings 0", "prettier --write"],
+    "src/**/*.{css,scss}": ["prettier --write"],
+    "*.{json,md,yaml,yml}": ["prettier --write"]
+  }
+}
+```
+
+### 6. Set Up CI
+
+Copy the CI workflow template:
+
+```bash
+mkdir -p .github/workflows
+cp node_modules/@aoholdings/frontend-standards/.github/workflows/ci-template.yml .github/workflows/ci.yml
+```
+
+Edit as needed for your project.
+
+### 7. Enable Git Hooks
+
+```bash
+pnpm prepare
+pnpm add -D husky lint-staged
+```
+
+### 8. Copy PR Template
+
+```bash
+mkdir -p .github
+cp node_modules/@aoholdings/frontend-standards/.github/PULL_REQUEST_TEMPLATE.md .github/
+```
+
+## Enforcement Summary
+
+| Rule                    | Tool                                                       | When                      |
+| ----------------------- | ---------------------------------------------------------- | ------------------------- |
+| Naming conventions      | ESLint (`id-length`, `camelcase`, `unicorn/filename-case`) | Editor + pre-commit + CI  |
+| Import order            | ESLint (`import/order`)                                    | Editor + pre-commit + CI  |
+| Domain modularization   | ESLint (`boundaries/*`) + `check-modularization.mjs`       | Pre-push + CI             |
+| Barrel file enforcement | ESLint (`import/no-internal-modules`)                      | Pre-push + CI             |
+| Console/debugger bans   | ESLint (`no-console`, `no-debugger`)                       | Pre-push + CI             |
+| Conventional commits    | commitlint                                                 | Commit + CI (anti-bypass) |
+| Type safety             | TypeScript (`tsc --noEmit`)                                | Pre-push + CI             |
+| Code formatting         | Prettier                                                   | Editor + pre-commit + CI  |
+| Test coverage           | Vitest (80% lines, 75% branches, 80% funcs, 80% stmts)     | Pre-push + CI             |
+| Security audit          | `pnpm audit --audit-level=high`                            | CI                        |
+| PR standards            | PR template checklist                                      | Code review               |
+
+## Versioning
+
+This package follows [Semantic Versioning](https://semver.org/). Bump the version and push a tag to publish:
+
+```bash
+npm version patch   # or minor, major
+git push --follow-tags
+```
+
+## Related Documents
+
+- [FRONTEND_STANDARDS.md](./FRONTEND_STANDARDS.md) — Full frontend coding standards
+- [CICD_STANDARDS.md](./CICD_STANDARDS.md) — CI/CD pipeline standards
+- [BACKEND_STANDARDS.md](./BACKEND_STANDARDS.md) — Backend coding standards

package/commitlint.config.js

@@ -0,0 +1,33 @@
+export default {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'security',
+        'perf',
+        'docs',
+        'style',
+        'refactor',
+        'test',
+        'chore',
+        'ci',
+        'build',
+        'revert',
+      ],
+    ],
+    'type-case': [2, 'always', 'lower-case'],
+    'type-empty': [2, 'never'],
+    'scope-case': [2, 'always', 'lower-case'],
+    'subject-empty': [2, 'never'],
+    'subject-full-stop': [2, 'never', '.'],
+    'subject-max-length': [2, 'always', 100],
+    'header-max-length': [2, 'always', 120],
+    'body-max-line-length': [2, 'always', 100],
+    'body-leading-blank': [2, 'always'],
+    'footer-leading-blank': [2, 'always'],
+  },
+};

package/eslint.config.js

@@ -0,0 +1,310 @@
+import js from '@eslint/js';
+import boundaries from 'eslint-plugin-boundaries';
+import importPlugin from 'eslint-plugin-import';
+import jsxA11y from 'eslint-plugin-jsx-a11y';
+import prettierPlugin from 'eslint-plugin-prettier/recommended';
+import reactPlugin from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import unicorn from 'eslint-plugin-unicorn';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  // ===== BASE: Ignore patterns =====
+  {
+    ignores: [
+      'dist/**',
+      'node_modules/**',
+      'coverage/**',
+      '.output/**',
+      '.vinxi/**',
+      'build/**',
+      'scripts/**',
+      'vitest.config.base.ts',
+      'tsconfig.base.json',
+      'tsconfig.json',
+      '**/*.gen.ts',
+      '**/routeTree.gen.ts',
+      'pnpm-lock.yaml',
+      'package-lock.json',
+    ],
+  },
+
+  // ===== ALL FILES: Core rules =====
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  prettierPlugin,
+
+  // ===== TYPESCRIPT FILES =====
+  {
+    files: ['**/*.ts', '**/*.tsx'],
+    plugins: {
+      react: reactPlugin,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+      import: importPlugin,
+      unicorn: unicorn,
+      'jsx-a11y': jsxA11y,
+      boundaries: boundaries,
+    },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: { ...globals.browser, ...globals.es2022 },
+      parser: tseslint.parser,
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        projectService: true,
+        allowDefaultProject: [
+          'vitest.config.base.ts',
+          'eslint.config.js',
+          'commitlint.config.js',
+          'prettier.config.js',
+        ],
+      },
+    },
+    settings: {
+      react: { version: 'detect' },
+      'import/resolver': {
+        typescript: { alwaysTryTypes: true },
+      },
+      // === BOUNDARIES: Domain modularization (see FRONTEND_STANDARDS.md Section 5.2.1) ===
+      'boundaries/include': ['src/**/*'],
+      'boundaries/elements': [
+        {
+          mode: 'full',
+          type: 'shared',
+          pattern: [
+            'src/services/api-client.ts',
+            'src/hooks/use-debounce.ts',
+            'src/hooks/use-media-query.ts',
+            'src/components/ui/**',
+            'src/lib/utils.ts',
+            'src/lib/*.ts',
+            'src/types/!(*/**).ts',
+          ],
+        },
+        {
+          mode: 'full',
+          type: 'employee',
+          pattern: [
+            'src/services/employee/**',
+            'src/hooks/employee/**',
+            'src/store/employee/**',
+            'src/components/employee/**',
+            'src/lib/employee/**',
+            'src/types/employee/**',
+          ],
+        },
+        {
+          mode: 'full',
+          type: 'auth',
+          pattern: [
+            'src/services/auth/**',
+            'src/hooks/auth/**',
+            'src/store/auth/**',
+            'src/components/auth/**',
+            'src/lib/auth/**',
+            'src/types/auth/**',
+          ],
+        },
+        {
+          mode: 'full',
+          type: 'users',
+          pattern: [
+            'src/services/users/**',
+            'src/hooks/users/**',
+            'src/store/users/**',
+            'src/components/users/**',
+            'src/lib/users/**',
+            'src/types/users/**',
+          ],
+        },
+      ],
+    },
+    rules: {
+      // ===== NAMING (FRONTEND_STANDARDS.md Section 5.2) =====
+      'id-length': [
+        'error',
+        {
+          min: 2,
+          max: 50,
+          exceptions: ['i', 'j', 'k', '_', 'x', 'y', 'z'],
+          properties: 'never',
+        },
+      ],
+      camelcase: [
+        'error',
+        {
+          properties: 'never',
+          ignoreDestructuring: false,
+          allow: ['^UNSAFE_'],
+        },
+      ],
+      'unicorn/filename-case': [
+        'error',
+        {
+          case: 'kebabCase',
+          ignore: ['^[A-Z].*\\.tsx$'],
+        },
+      ],
+
+      // ===== REACT =====
+      'react/jsx-pascal-case': ['error', { allowAllCaps: true }],
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+
+      // ===== IMPORTS (FRONTEND_STANDARDS.md Section 5.3) =====
+      'import/order': [
+        'error',
+        {
+          groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'],
+          'newlines-between': 'always',
+          alphabetize: { order: 'asc', caseInsensitive: true },
+        },
+      ],
+      'import/no-duplicates': 'error',
+      'import/no-unresolved': 'error',
+
+      // ===== FUNCTIONS =====
+      'prefer-arrow-callback': 'error',
+      'func-style': ['error', 'expression'],
+      'require-await': 'error',
+
+      // ===== NULL SAFETY =====
+      'unicorn/no-null': 'error',
+
+      // ===== CONSOLE & DEBUGGER (FRONTEND_STANDARDS.md Section 13.4) =====
+      'no-console': ['error', { allow: ['warn', 'error'] }],
+      'no-debugger': 'error',
+
+      // ===== TYPE SAFETY =====
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unsafe-assignment': 'error',
+      '@typescript-eslint/no-unsafe-call': 'error',
+      '@typescript-eslint/no-unsafe-member-access': 'error',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        {
+          varsIgnorePattern: '^_',
+          argsIgnorePattern: '^_',
+        },
+      ],
+
+      // ===== PRETTIER =====
+      'prettier/prettier': [
+        'error',
+        {
+          semi: true,
+          singleQuote: true,
+          tabWidth: 2,
+          trailingComma: 'es5',
+          printWidth: 100,
+        },
+      ],
+
+      // ===== MODULARIZATION (FRONTEND_STANDARDS.md Section 5.2.1) =====
+      'boundaries/entry-point': [
+        'error',
+        {
+          default: 'disallow',
+          rules: [
+            { target: ['src/services/**/*.ts'], allow: 'src/services/api-client.ts' },
+            {
+              target: [
+                'src/hooks/use-employee*.ts',
+                'src/hooks/use-auth*.ts',
+                'src/hooks/use-user*.ts',
+              ],
+              disallow: 'src/hooks/',
+            },
+            { target: ['src/store/**/*.ts'], allow: 'src/store/index.ts' },
+          ],
+        },
+      ],
+      'boundaries/element-types': [
+        'error',
+        {
+          default: 'disallow',
+          rules: [
+            { from: ['employee', 'auth', 'users'], allow: ['shared'] },
+            { from: ['employee'], disallow: ['auth', 'users'] },
+            { from: ['auth'], disallow: ['employee', 'users'] },
+            { from: ['users'], disallow: ['employee', 'auth'] },
+            { from: ['shared'], allow: ['shared'] },
+          ],
+        },
+      ],
+
+      // ===== BLOCK DEEP IMPORTS BYPASSING BARREL FILES =====
+      'import/no-internal-modules': [
+        'error',
+        {
+          allow: [
+            'src/services/*/index',
+            'src/hooks/*/index',
+            'src/store/*/index',
+            'src/components/*/index',
+            'src/lib/*/index',
+            'src/types/*/index',
+            'src/services/api-client',
+            'src/hooks/use-debounce',
+            'src/hooks/use-media-query',
+            'src/components/ui/**',
+            'src/lib/utils',
+            'src/lib/*',
+            'src/types/*',
+            'src/app/**',
+            'src/routes/**',
+            'src/styles/**',
+            'src/test/**',
+            'src/mocks/**',
+            'src/config/**',
+          ],
+        },
+      ],
+
+      // ===== ACCESSIBILITY =====
+      'jsx-a11y/anchor-is-valid': 'error',
+      'jsx-a11y/alt-text': 'error',
+      'jsx-a11y/aria-props': 'error',
+      'jsx-a11y/aria-role': 'error',
+      'jsx-a11y/click-events-have-key-events': 'warn',
+      'jsx-a11y/no-static-element-interactions': 'warn',
+      'jsx-a11y/label-has-associated-control': 'error',
+      'jsx-a11y/no-autofocus': 'warn',
+
+      // ===== GENERAL CODE QUALITY =====
+      'no-var': 'error',
+      'prefer-const': 'error',
+      eqeqeq: ['error', 'always'],
+      curly: ['error', 'multi-line'],
+      'no-eval': 'error',
+      'no-implied-eval': 'error',
+      'no-new-func': 'error',
+      'no-param-reassign': 'warn',
+      'no-return-await': 'error',
+    },
+  },
+
+  // ===== TEST FILES: Relaxed rules =====
+  {
+    files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx', '**/__tests__/**'],
+    rules: {
+      'no-console': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+      'import/no-internal-modules': 'off',
+    },
+  },
+
+  // ===== MOCK FILES: Relaxed rules =====
+  {
+    files: ['**/mocks/**', '**/*.mock.ts', '**/*.mock.tsx'],
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      'import/no-internal-modules': 'off',
+    },
+  }
+);

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@synergyerp/frontend-standards",
+  "version": "1.0.0",
+  "description": "SynergyERP shared frontend standards — ESLint, Prettier, commitlint, Husky, Vitest, TypeScript configs, modularization enforcement, and PR templates.",
+  "private": false,
+  "type": "module",
+  "main": "eslint.config.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "files": [
+    "eslint.config.js",
+    "prettier.config.js",
+    ".prettierignore",
+    "commitlint.config.js",
+    "tsconfig.base.json",
+    "vitest.config.base.ts",
+    "scripts/",
+    ".husky/",
+    ".vscode/",
+    ".github/"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aoholdings/frontend-standards.git"
+  },
+  "keywords": [
+    "eslint-config",
+    "prettier-config",
+    "commitlint-config",
+    "frontend-standards",
+    "ao-holdings"
+  ],
+  "author": "AO Holdings",
+  "license": "Proprietary",
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "eslint": ">=9.0.0",
+    "prettier": ">=3.0.0",
+    "typescript": ">=5.5.0",
+    "vitest": ">=2.0.0"
+  },
+  "dependencies": {
+    "@commitlint/config-conventional": "^19.0.0",
+    "@eslint/js": "^9.0.0",
+    "@vitejs/plugin-react": "^4.0.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-boundaries": "^6.0.0",
+    "eslint-import-resolver-typescript": "^3.0.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.37.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.0",
+    "eslint-plugin-unicorn": "^56.0.0",
+    "globals": "^15.0.0",
+    "prettier-plugin-organize-imports": "^4.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite-tsconfig-paths": "^5.0.0"
+  },
+  "devDependencies": {
+    "eslint": "^9.0.0",
+    "prettier": "^3.0.0",
+    "typescript": "^5.5.0",
+    "vitest": "^3.0.0",
+    "@types/node": "^22.0.0"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "check-modularization": "node scripts/check-modularization.mjs; exit 0",
+    "check-types": "tsc --noEmit; exit 0",
+    "test:ci": "exit 0",
+    "test": "exit 0"
+  }
+}

package/prettier.config.js

@@ -0,0 +1,12 @@
+export default {
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+  trailingComma: 'es5',
+  printWidth: 100,
+  bracketSpacing: true,
+  arrowParens: 'always',
+  endOfLine: 'lf',
+  plugins: ['prettier-plugin-organize-imports'],
+};

package/scripts/check-modularization.mjs

@@ -0,0 +1,158 @@
+#!/usr/bin/env node
+
+/**
+ * Domain Modularization Validator
+ *
+ * Enforces:
+ * 1. No flat/orphaned domain files at directory roots (must be in subdirectories)
+ * 2. Every domain subdirectory must have an index.ts barrel file
+ * 3. No nested subdirectories inside domains (domains must be flat)
+ *
+ * See: FRONTEND_STANDARDS.md Section 3.3.1, CICD_STANDARDS.md Section 19
+ */
+
+import { existsSync, readdirSync, statSync } from 'fs';
+import { dirname, join } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+// Resolve project root: 2 levels up from scripts/ when installed as node_modules
+let PROJECT_ROOT = join(__dirname, '..', '..', '..');
+// If running from the standards package itself, go up 1 level
+if (!existsSync(join(PROJECT_ROOT, 'src'))) {
+  PROJECT_ROOT = join(__dirname, '..');
+}
+
+const SRC = join(PROJECT_ROOT, 'src');
+
+const MODULARIZED_DIRS = ['services', 'hooks', 'store', 'components', 'lib', 'types'];
+
+const ALLOWED_ROOT_FILES = {
+  services: ['api-client.ts', 'index.ts'],
+  hooks: [
+    'use-debounce.ts',
+    'use-media-query.ts',
+    'use-online-status.ts',
+    'use-mobile.tsx',
+    'index.ts',
+  ],
+  store: ['index.ts'],
+  components: ['index.ts'],
+  lib: ['utils.ts', 'index.ts'],
+  types: ['index.ts'],
+};
+
+const BARREL_FILE = 'index.ts';
+
+let errors = 0;
+let warnings = 0;
+
+function logError(msg) {
+  console.error(`  ❌ ERROR: ${msg}`);
+  errors++;
+}
+
+function logWarning(msg) {
+  console.warn(`  ⚠️  WARNING: ${msg}`);
+  warnings++;
+}
+
+function isDirectory(p) {
+  try {
+    return statSync(p).isDirectory();
+  } catch {
+    return false;
+  }
+}
+
+function isTsFile(filename) {
+  return (
+    /\.(ts|tsx)$/.test(filename) &&
+    !filename.endsWith('.test.ts') &&
+    !filename.endsWith('.test.tsx') &&
+    !filename.endsWith('.spec.ts') &&
+    !filename.endsWith('.spec.tsx') &&
+    !filename.endsWith('.d.ts')
+  );
+}
+
+console.log('\n🔍 Checking frontend modularization compliance...\n');
+
+if (!existsSync(SRC)) {
+  console.log('  No src/ directory found. Skipping modularization check.\n');
+  process.exit(0);
+}
+
+for (const dirName of MODULARIZED_DIRS) {
+  const dirPath = join(SRC, dirName);
+  if (!existsSync(dirPath) || !isDirectory(dirPath)) continue;
+
+  const allowedRoot = ALLOWED_ROOT_FILES[dirName] || [];
+  let entries;
+  try {
+    entries = readdirSync(dirPath);
+  } catch {
+    continue;
+  }
+
+  for (const entry of entries) {
+    const entryPath = join(dirPath, entry);
+
+    if (isDirectory(entryPath)) {
+      // Domain subdirectory
+      console.log(`  📁 ${dirName}/${entry}/`);
+
+      const barrelPath = join(entryPath, BARREL_FILE);
+      if (!existsSync(barrelPath)) {
+        logError(`${dirName}/${entry}/ is missing required ${BARREL_FILE} barrel file`);
+      } else {
+        const domainFiles = readdirSync(entryPath).filter((f) => isTsFile(f) && f !== BARREL_FILE);
+        if (domainFiles.length === 0) {
+          logWarning(`${dirName}/${entry}/${BARREL_FILE} exists but no implementation files found`);
+        }
+      }
+
+      // Check no nested subdirectories (domains should be flat)
+      let subEntries;
+      try {
+        subEntries = readdirSync(entryPath);
+      } catch {
+        continue;
+      }
+      for (const subEntry of subEntries) {
+        if (subEntry === 'test' || subEntry === '__tests__' || subEntry === '__mocks__') continue;
+        const subPath = join(entryPath, subEntry);
+        if (isDirectory(subPath)) {
+          logWarning(
+            `${dirName}/${entry}/ contains nested subdirectory "${subEntry}/" — domains should be flat`
+          );
+        }
+      }
+    } else if (isTsFile(entry)) {
+      // Flat file at directory root
+      if (!allowedRoot.includes(entry)) {
+        const fileName = entry.replace(/\.(ts|tsx)$/, '');
+        logError(
+          `Flat file "${dirName}/${entry}" is not allowed at the root level. ` +
+            `Move it to a domain subdirectory: ${dirName}/${fileName}/${entry}. ` +
+            `Allowed root files in ${dirName}/: ${allowedRoot.join(', ') || 'none'}`
+        );
+      }
+    }
+  }
+}
+
+console.log(
+  `\n${errors === 0 ? '✅' : '❌'} Modularization check complete. Errors: ${errors}, Warnings: ${warnings}\n`
+);
+
+if (errors > 0) {
+  console.error('Fix the errors above before pushing.\n');
+  process.exit(1);
+}
+
+if (warnings > 0) {
+  console.warn('Consider addressing the warnings above.\n');
+}

package/tsconfig.base.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowJs": false,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "vite.config.ts",
+    "vitest.config.base.ts",
+    "eslint.config.js"
+  ],
+  "exclude": ["node_modules", "dist", "coverage", "build"]
+}

package/vitest.config.base.ts

@@ -0,0 +1,38 @@
+import react from '@vitejs/plugin-react';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  plugins: [react(), tsconfigPaths()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    exclude: ['node_modules', 'dist', 'build'],
+    css: true,
+    coverage: {
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'cobertura'],
+      include: ['src/**/*.{ts,tsx}'],
+      exclude: [
+        'src/**/*.test.{ts,tsx}',
+        'src/**/*.spec.{ts,tsx}',
+        'src/**/*.d.ts',
+        'src/test/**',
+        'src/mocks/**',
+        'src/main.tsx',
+        'src/vite-env.d.ts',
+      ],
+      // Thresholds enforced via thresholds block — vitest v3 no longer supports
+      // top-level lines/branches/functions/statements shorthand (deprecated in v2→v3).
+      thresholds: {
+        lines: 80,
+        branches: 75,
+        functions: 80,
+        statements: 80,
+        perFile: true,
+      },
+    },
+  },
+});