npm package: @meui-creative/dev-tools
Description: Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing
Author: MEUI Creative
Latest version: 1.0.6

# @meui-creative/dev-tools

Professional responsive DevTools for React applications with device preview, performance testing, and accessibility auditing.

## Features

- 📱 **Multi-Device Preview** - Test across phones, tablets, laptops, and desktops
- ⚡ **Performance Analysis** - Lighthouse-style metrics and Core Web Vitals
- ♿ **Accessibility Testing** - WCAG compliance checking
- 🔍 **SEO Analysis** - Complete SEO auditing with recommendations
- 🔒 **Security Testing** - Security headers and vulnerability scanning
- 🎨 **Real Device UI** - Authentic iOS/Android status bars and browser chrome
- 🌙 **Dark Mode** - Beautiful dark and light themes
- ⌨️ **Keyboard Shortcuts** - Quick access with Ctrl+Shift+D

## Installation

```bash
bun add @meui-creative/dev-tools
# or
npm install @meui-creative/dev-tools
```

## Quick Start

### Nejjednoduší způsob - automatické skrytí v produkci

```tsx
// app/layout.tsx nebo kdekoli
import { DevTools } from '@meui-creative/dev-tools'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <DevTools />  {/* Automaticky se skryje v produkci */}
      </body>
    </html>
  )
}
```

### Jako wrapper

```tsx
// app/layout.tsx
import { DevToolsLauncher } from '@meui-creative/dev-tools'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <DevToolsLauncher>
          {children}
        </DevToolsLauncher>
      </body>
    </html>
  )
}
```

### React App

```tsx
// App.tsx
import { DevTools } from '@meui-creative/dev-tools'

function App() {
  return (
    <div>
      <YourApp />
      <DevTools />  {/* Žádná podmínka není potřeba! */}
    </div>
  )
}
```

### Manual Integration

```tsx
import { DevToolsManual, useDevTools } from '@meui-creative/dev-tools'

function MyApp() {
  const { isOpen, toggle } = useDevTools()
  
  return (
    <>
      <YourApp />
      <button onClick={toggle}>Toggle DevTools</button>
      <DevToolsManual isOpen={isOpen} onToggle={toggle} />
    </>
  )
}
```

### Force Show (pro testování)

```tsx
import { DevToolsForce } from '@meui-creative/dev-tools'

function App() {
  return (
    <>
      <YourApp />
      <DevToolsForce />  {/* Vždy viditelné, i v produkci */}
    </>
  )
}
```

## Advanced Usage

### Provider Pattern

```tsx
import { DevToolsProvider, useDevToolsContext } from '@meui-creative/dev-tools'

function App() {
  return (
    <DevToolsProvider>
      <YourApp />
    </DevToolsProvider>
  )
}

function SomeComponent() {
  const { open, close } = useDevToolsContext()
  
  return (
    <button onClick={open}>Open DevTools</button>
  )
}
```

### HOC Pattern

```tsx
import { withDevTools } from '@meui-creative/dev-tools'

const AppWithDevTools = withDevTools(YourApp)

export default AppWithDevTools
```

### Standalone Usage

```tsx
import { DevToolsStandalone } from '@meui-creative/dev-tools'

// Perfect for component testing
function ComponentTest() {
  return <DevToolsStandalone url="http://localhost:3000" />
}
```

## Keyboard Shortcuts

- `Ctrl+Shift+D` (or `Cmd+Shift+D`) - Toggle DevTools
- `Escape` - Close DevTools

## Device Categories

### Phones
- iPhone SE (375×667)
- iPhone 15 Pro (393×852) with notch
- Samsung S24 Ultra (412×915)

### Tablets
- iPad Mini (768×1024)
- iPad Air (820×1180)
- iPad Pro 12.9" (1024×1366)

### Laptops
- MacBook Air 13" (1280×800)
- MacBook Pro 14" (1512×982)
- MacBook Pro 16" (1728×1117)

### Desktops
- Small Desktop (1366×768)
- Standard Desktop (1920×1080)
- 4K Desktop (3840×2160)

### Special Monitors
- Ultrawide 21:9 (3440×1440)
- Super Ultrawide 32:9 (5120×1440)
- Vertical Coding (1440×2560)

## Testing Features

### Performance Testing
- Lighthouse scores (Performance, Accessibility, Best Practices, SEO, PWA)
- Core Web Vitals (LCP, FID, CLS, FCP, SI, TBT)
- Resource analysis (bundle size, compression, caching)
- Network metrics

### Accessibility Testing
- Color contrast checking
- Missing alt text detection
- Heading structure validation
- Keyboard navigation testing
- ARIA compliance

### SEO Analysis
- Meta tags optimization
- Heading structure
- Image alt text coverage
- Technical SEO (HTTPS, mobile-friendly, canonical URLs)
- Structured data validation

### Security Testing
- HTTPS encryption
- Security headers (HSTS, CSP, X-Frame-Options)
- Mixed content detection
- Vulnerability scanning

## Automatická detekce Development Environment

DevTools automaticky detekuje development environment a skryje se v produkci. Detekce funguje pomocí:

1. **NODE_ENV** - `process.env.NODE_ENV === 'development'`
2. **Dev servery** - porty 3000, 3001, 5173, 8080, 4200, 8000, 9000
3. **Dev hosty** - localhost, 127.0.0.1, 0.0.0.0
4. **Query parameter** - `?dev=true`

### Jak ovládat zobrazení

```tsx
// Základní - automatické skrytí v produkci
<DevTools />

// Zakázat automatické skrytí
<DevTools hideInProduction={false} />

// Skrýt pomocí URL parametru
// http://localhost:3000?no-dev-tools=true

// Zobrazit pomocí URL parametru v produkci
// https://mysite.com?dev=true
```

## Configuration

DevTools automatically hides in production and when `?no-dev-tools=true` is in the URL.

## TypeScript Support

Full TypeScript support with exported types:

```tsx
import type {
    Device,
    LighthouseMetrics,
    AccessibilityIssue,
    SEOMetrics
} from '@meui-creative/dev-tools'
```

## Browser Support

- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+

## License

MIT © MEUI Creative

## Contributing

Issues and PRs welcome! Please read our contributing guidelines.

---

Made with ❤️ by [MEUI Creative](https://github.com/meui-creative)