# overview-components

Reusable **Lit 3** web components for the case-overview section, with optional **React**
wrappers, JSON validation schemas, and built-in internationalization (`@lit/localize`).

> **Private / internal package** — distributed via the internal registry. Licensed `UNLICENSED`.

## Install

```bash
npm install overview-components
```

This package is **ESM-only** (`"type": "module"`). It cannot be loaded with `require()`.

### Peer dependencies

| Peer | Required? | Used by |
| --- | --- | --- |
| `lit` `^3.0.0` | **yes** | all components (provided by the consumer so a single Lit instance is shared) |
| `pdfjs-dist` `>=5.0.0` | **yes** | `lit-attachments-tab` (PDF thumbnails) |
| `react` `>=17` | only for `overview-components/react` | React wrappers |
| SheetJS via `window.XLSX` | optional | Excel export in `lit-data-grid-tanstack` (the host provides SheetJS; it is **not** bundled) |

```bash
npm install lit pdfjs-dist        # required peers
npm install react                 # only if you use the React wrappers
```

For Excel export the host app makes SheetJS available on `window.XLSX` (it is not bundled, to
avoid forcing a heavy/CVE-prone dependency on every consumer):

```js
import * as XLSX from 'xlsx';   // any SheetJS build/CDN works
window.XLSX = XLSX;
```

## Co nainstalovat podle funkcionality (v cílové aplikaci)

Balíček záměrně **nebundluje** těžké/sdílené závislosti — dodáváš je v cílové app jako
peer závislosti, aby se sdílela jedna instance (hlavně Lit) a nic se nezdvojovalo.
Nainstaluj jen to, co odpovídá tomu, co skutečně používáš:

| Co chceš používat | Importuješ z | Musíš v app nainstalovat |
| --- | --- | --- |
| Lit / vanilla komponenty (`<lit-…>`) | `overview-components` | `overview-components`, `lit`, `pdfjs-dist` |
| React wrappery (`<Badge />`, …) | `overview-components/react` | `overview-components`, `lit`, `pdfjs-dist`, `react` |
| Jen JSON schémata (i v Node, bez DOM) | `overview-components/schemas` | `overview-components` (nic dalšího) |
| Excel export v `lit-data-grid-tanstack` | — (navíc k výše uvedenému) | sprístupniť `window.XLSX` (SheetJS — nebundluje sa) |
| PDF náhledy v `lit-attachments-tab` | — (součást základu) | `pdfjs-dist` *(už je v základu)* |

> Hlavní vstupní bod `overview-components` natáhne celou knihovnu komponent včetně
> `lit-attachments-tab`, který používá `pdfjs-dist` — proto je `pdfjs-dist` potřeba
> i v základním scénáři, ne jen když attachments tab přímo používáš.

### Příkazy podle scénáře

```bash
# A) Lit / vanilla komponenty
npm install overview-components lit@^3 pdfjs-dist@">=5"

# B) React wrappery (k tomu, co je v A)
npm install react

# C) Jen JSON schémata (např. validace v Node) — stačí samotný balíček
npm install overview-components

# D) Excel export v data-gridu (k tomu, co je v A nebo B) — SheetJS se nebundluje,
#    host ho sprístupní na window.XLSX:
#    import * as XLSX from 'xlsx'; window.XLSX = XLSX;
```

Pokud některou peer závislost nenainstaluješ, build cílové app spadne na
`Cannot find module '…'` (např. chybějící `lit`); Excel export bez `window.XLSX`
vyhodí srozumitelnou chybu.

## Usage — Lit / vanilla

Importing the package registers the custom elements (the package declares
`"sideEffects": true`, so bundlers keep the `customElements.define(...)` calls):

```js
import 'overview-components';
```

```html
<lit-badge>...</lit-badge>
<lit-data-grid-tanstack></lit-data-grid-tanstack>
<lit-tabs-overview></lit-tabs-overview>
```

Main registered elements: `lit-data-grid-tanstack`, `lit-attachments-tab`,
`lit-case-variables-tab`, `lit-section-tab`, `lit-tabs-overview`, `lit-badge`,
`lit-chart`, `lit-filter-builder`, `lit-filter-modal`, `lit-ai-filter-assistant`,
`lit-multiselect-item`.

## Usage — React

React wrappers are exposed through a **separate subpath** so non-React consumers are not
forced to install React:

```jsx
import { DataGridTanstack, Badge } from 'overview-components/react';

function App() {
  return <Badge>Hello</Badge>;
}
```

## Usage — JSON schemas

The validation schemas are DOM-free and can be imported on their own (e.g. in Node):

```js
import { litDataGridTanstackSchema } from 'overview-components/schemas';
```

## Internationalization

Source locale is Czech (`cs`); 9 target locales (`en, de, sk, pl, fr, hr, it, ro, sr`)
are bundled. Locale is switched at runtime via `@lit/localize`.

## Build

```bash
npm run build      # rm -rf dist && tsc  → ESM + type declarations in dist/
npm run typecheck  # tsc --noEmit
```