@bardioc/configs

Shared configuration presets for ESLint, TypeScript, Prettier, Vitest, and Playwright across all Bardioc projects.

Features

• ESLint — React, Next.js, and library presets with TypeScript support
• TypeScript — Base, React library, and Next.js configurations
• Prettier — Opinionated code formatting with Tailwind support
• Vitest — Workspace and package-level test configurations
• Playwright — E2E test configuration with sensible defaults

Installation

pnpm add -D @bardioc/configs eslint prettier typescript vitest @playwright/test

Peer Dependencies

Install based on what you need:

# ESLint + Prettier
pnpm add -D eslint prettier

# TypeScript
pnpm add -D typescript

# Vitest
pnpm add -D vitest

# Playwright
pnpm add -D @playwright/test

Usage

ESLint

For Next.js Apps

// eslint.config.js
import { config } from '@bardioc/configs/eslint/next';

export default config;

For React Apps (no Next.js)

// eslint.config.js
import { config } from '@bardioc/configs/eslint/react';

export default config;

For Libraries (standalone packages)

// eslint.config.js
import { config } from '@bardioc/configs/eslint/library';

export default config;

Custom overrides:

import { config as baseConfig } from '@bardioc/configs/eslint/react';

export default [
  ...baseConfig,
  {
    rules: {
      'no-console': 'off', // Override specific rules
    },
  },
];

TypeScript

Base Configuration

{
  "extends": "@bardioc/configs/typescript/base"
}

React Library

{
  "extends": "@bardioc/configs/typescript/react-library",
  "compilerOptions": {
    "outDir": "./dist",
    "rootDir": "./src"
  }
}

Next.js

{
  "extends": "@bardioc/configs/typescript/nextjs",
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Prettier

// prettier.config.mjs
import config from '@bardioc/configs/prettier';

export default config;

Custom overrides:

import baseConfig from '@bardioc/configs/prettier';

export default {
  ...baseConfig,
  printWidth: 120, // Override specific options
};

Vitest

Workspace Configuration (Monorepo)

// vitest.config.ts (root)
import { createWorkspaceConfig } from '@bardioc/configs/vitest/workspace';

export default createWorkspaceConfig({
  projects: ['apps/webos-host', 'packages/ui', 'packages/os', 'workers/os-kernel'],
  coverage: {
    include: ['**/src/**/*.{ts,tsx}'],
  },
});

Package Configuration

// packages/ui/vitest.config.ts
import { createPackageConfig } from '@bardioc/configs/vitest/package';

export default createPackageConfig({
  environment: 'jsdom',
  setupFiles: ['./tests/setup.ts'],
  coverage: {
    include: ['src/**'],
    exclude: ['src/**/*.stories.tsx'],
  },
});

Available environments:

• node — Default, for Node.js code
• jsdom — For React/browser code
• happy-dom — Lighter alternative to jsdom

Playwright

// playwright.config.ts
import { createE2EConfig } from '@bardioc/configs/playwright/e2e';

export default createE2EConfig({
  testDir: './apps',
  baseURL: 'http://localhost:3000',
  port: 3000,
  devCommand: 'pnpm dev',
});

Custom projects:

import { createE2EConfig } from '@bardioc/configs/playwright/e2e';

export default createE2EConfig({
  testDir: './tests',
  projects: [
    {
      name: 'setup',
      testMatch: /global\.setup\.ts/,
    },
    {
      name: 'e2e',
      testMatch: '**/*.spec.ts',
      use: { viewport: { width: 1920, height: 1080 } },
    },
  ],
});

Configuration Details

ESLint Rules

All ESLint configs include:

• TypeScript — Type-aware linting with typescript-eslint
• React — React 19+ with Hooks rules
• Prettier — Enforced via eslint-plugin-prettier
• Unused imports — Auto-removal with eslint-plugin-unused-imports
• Turbo (react/next only) — Monorepo env var checking

Key rules:

• no-console: warn (allow console.warn, console.error)
• @typescript-eslint/no-explicit-any: warn
• react/jsx-key: error
• unused-imports/no-unused-imports: error

Ignored paths:

• dist/, build/, .next/, node_modules/
• Test files (**/*.test.*, **/*.spec.*)
• Shadcn components (**/shadcn/**)

TypeScript Strict Mode

All configs enable:

• strict: true
• noUncheckedIndexedAccess: true
• forceConsistentCasingInFileNames: true

Prettier Style

• Single quotes (except JSX)
• Semicolons always
• 2-space indentation
• 100 character line width
• ES5 trailing commas
• Arrow function parens: avoid

Tailwind class sorting: Enabled via prettier-plugin-tailwindcss

Vitest Coverage

Default coverage settings:

• Provider: V8
• Reporters: text, lcov, json
• Include: src/**/*.{ts,tsx}
• Exclude: Tests, stories, Shadcn components

Playwright Defaults

• Timeout: 120s
• Retries (CI): 1
• Workers (CI): 1 (serial)
• Screenshots: On failure only
• Trace: On first retry
• Color scheme: Dark

Package Structure

@bardioc/configs/
├── eslint/
│   ├── react.js           # Base React config
│   ├── next.js            # Next.js (extends react)
│   └── library.js         # Standalone libraries
├── typescript/
│   ├── base.json
│   ├── react-library.json
│   └── nextjs.json
├── prettier/
│   └── prettier.config.mjs
├── vitest/
│   ├── workspace.js       # Monorepo workspace config
│   └── package.js         # Single-package config
└── playwright/
    └── e2e.js             # E2E config preset

Migration from Old Packages

If migrating from @bardioc/eslint-config or @bardioc/typescript-config:

ESLint

- import { config } from '@bardioc/eslint-config/react';
+ import { config } from '@bardioc/configs/eslint/react';

TypeScript

- "extends": "@bardioc/typescript-config/base.json"
+ "extends": "@bardioc/configs/typescript/base"

Prettier

- import config from '@bardioc/eslint-config/prettier';
+ import config from '@bardioc/configs/prettier';

Related Packages

• @bardioc/types — Shared TypeScript types
• @bardioc/i18n-core — Internationalization library
• @bardioc/ui — UI component library

Publishing

This package is published to the public npm registry:

pnpm publish:configs   # from the repo root

License

MIT © 2026 ALMATO AG