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

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) |

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):

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

# 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):

import 'overview-components';

<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:

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):

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

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