Style Guide Configurations

A comprehensive Turborepo monorepo containing shareable configurations for linting, formatting, and TypeScript compilation. These opinionated configurations provide a consistent development experience across JavaScript, TypeScript, React, and Next.js projects.

What's inside?

This repository includes the following packages:

Packages

• @jabworks/eslint-plugin: Comprehensive ESLint plugin with modular flat configs for JavaScript, TypeScript, React, Next.js, and Vitest. Features zero-tolerance for warnings and support for modern development patterns.
• @jabworks/prettier-config: Opinionated Prettier configuration with essential plugins for Tailwind CSS class sorting, JSON formatting, and package.json organization.
• @jabworks/typescript-config: Shared TypeScript configurations (base, nextjs, react-library) with strict settings and modern module resolution.
• @jabworks/stylelint-config: Placeholder for future Stylelint configuration.

Apps

• apps/web/: Next.js demo application showcasing all configurations with Vitest browser testing setup
• apps/docs/: Documentation site for the style guide packages

All packages are built with modern tooling and 100% TypeScript support.

Quick Start

Using the ESLint Plugin

npm install -D @jabworks/eslint-plugin

// eslint.config.mjs
import { plugin } from '@jabworks/eslint-plugin';

export default [
	{
		plugins: { '@jabworks/eslint-plugin': plugin },
	},
	...plugin.configs.next, // or .base, .react, .typescript
];

Using the Prettier Config

npm install -D @jabworks/prettier-config

// prettier.config.js
import { config } from '@jabworks/prettier-config';

export default config;

Using TypeScript Configs

npm install -D @jabworks/typescript-config

// tsconfig.json
{
	"extends": "@jabworks/typescript-config/base.json"
}

Development

This monorepo uses Turborepo for efficient task orchestration and pnpm for package management.

Setup

# Install dependencies
pnpm install

# Run all apps in development
pnpm dev

# Build all packages
pnpm build

# Lint everything
pnpm lint

# Type check all packages
pnpm check-types

Tools & Standards

• TypeScript - Static type checking with strict configuration
• ESLint - Code linting with zero tolerance for warnings
• Prettier - Code formatting with plugin ecosystem
• Turborepo - Monorepo orchestration and caching
• Changesets - Version management and publishing
• Vitest - Fast unit testing with browser mode support