@proef/common-ui 2.2.0 → 2.2.1

package/dist/types/v1/index.d.ts

@@ -8,7 +8,7 @@ export type { ScanQRCodesOptions } from './capabilities/documents/QRScanning/sca
 export { useTheme, applyTheme, themeBootScript, THEME_STORAGE_KEY } from './capabilities/theme/useTheme';
 export type { Theme } from './capabilities/theme/useTheme';
 export { useIsDark } from './capabilities/theme/useIsDark';
-export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, MenuIcon, PanelOpenIcon, SunIcon, MoonIcon, MonitorIcon, GlobeIcon, LogOutIcon, ExternalLinkIcon, WarningIcon, ErrorIcon, ChevronUpIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, LayersIcon, ListIcon, SlidersIcon, } from './foundations/icons/icons';
+export { QrCodeIcon, SparklesIcon, PrefilledIcon, LockIcon, InfoIcon, SearchIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, CloseIcon, MenuIcon, PanelOpenIcon, SunIcon, MoonIcon, MonitorIcon, GlobeIcon, LogOutIcon, ExternalLinkIcon, WarningIcon, ErrorIcon, ChevronUpIcon, ChevronRightIcon, ChevronsUpDownIcon, FilterIcon, LayersIcon, ListIcon, SlidersIcon, BoldIcon, ItalicIcon, UnderlineIcon, StrikethroughIcon, ListBulletIcon, ListNumberedIcon, QuoteIcon, ImageIcon, MaximizeIcon, MinimizeIcon, } from './foundations/icons/icons';
 export type { IconProps } from './foundations/icons/icons';
 export { default as TextInput } from './primitives/forms/TextInput/TextInput';
 export type { TextInputProps } from './primitives/forms/TextInput/TextInput';
@@ -24,6 +24,11 @@ export { default as Checkbox } from './primitives/forms/Checkbox/Checkbox';
 export type { CheckboxProps } from './primitives/forms/Checkbox/Checkbox';
 export { default as LookupInput } from './primitives/forms/LookupInput/LookupInput';
 export type { LookupInputProps } from './primitives/forms/LookupInput/LookupInput';
+export { default as RichTextEditor } from './primitives/forms/RichTextEditor/RichTextEditor';
+export type { RichTextEditorProps, RichTextEditorLabels } from './primitives/forms/RichTextEditor/RichTextEditor';
+export { default as RichText } from './primitives/display/RichText/RichText';
+export type { RichTextProps } from './primitives/display/RichText/RichText';
+export { isRichText, sanitizeRichText, richTextToPlain, richTextIsEmpty, textToRichText, richTextContentClasses, } from './primitives/display/RichText/utils';
 export { default as FormGrid, FormDivider } from './components/forms/FormGrid/FormGrid';
 export type { FormGridProps } from './components/forms/FormGrid/FormGrid';
 export { default as FormField, FieldMark } from './components/forms/FormField/FormField';
@@ -73,9 +78,9 @@ export { default as PaginatedTable } from './components/tables/PaginatedTable/Pa
 export type { PaginatedTableProps } from './components/tables/PaginatedTable/PaginatedTable';
 export { DEFAULT_TABLE_LABELS } from './components/tables/Table/labels';
 export type { TableLabels } from './components/tables/Table/labels';
-export { default as ListItem } from './primitives/lists/ListItem/ListItem';
+export { default as ListItem, HighlightText } from './primitives/lists/ListItem/ListItem';
 export type { ListItemProps, ListItemContent } from './primitives/lists/ListItem/ListItem';
-export { default as ListFinder } from './components/lists/ListFinder/ListFinder';
+export { default as ListFinder, termosDaPesquisa } from './components/lists/ListFinder/ListFinder';
 export type { ListFinderProps } from './components/lists/ListFinder/ListFinder';
 export { DEFAULT_LIST_FINDER_LABELS } from './components/lists/ListFinder/labels';
 export type { ListFinderLabels } from './components/lists/ListFinder/labels';

package/dist/types/v1/primitives/display/RichText/RichText.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface RichTextProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'dangerouslySetInnerHTML'> {
+    /** O texto: HTML do RichTextEditor ou texto simples (antigo, sem formatação). */
+    value: string | null | undefined;
+}
+/**
+ * Mostra um texto com formatação (negrito, listas, citações, ligações, imagens) escrito no
+ * [RichTextEditor](?path=/docs/v1-primitives-forms-richtexteditor--docs).
+ *
+ * O HTML é sempre limpo antes de entrar na página: só ficam as marcas de formatação (sem
+ * scripts, estilos nem eventos) e as ligações abrem noutro separador. Texto sem marcas
+ * (guardado antes do editor) aparece com as mudanças de linha.
+ *
+ * Não tem cor própria: herda a de quem o põe (ex: branco numa bolha navy de uma conversa).
+ */
+export declare function RichText({ value, className, ...props }: RichTextProps): React.JSX.Element;
+export default RichText;

package/dist/types/v1/primitives/display/RichText/utils.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Texto com formatação (HTML do [RichTextEditor](?path=/docs/v1-primitives-forms-richtexteditor--docs)):
+ * as classes do conteúdo e as funções para o guardar, ler e mostrar em segurança.
+ */
+/**
+ * Aspeto do conteúdo (listas, citações, ligações, imagens). Sem cor de texto: herda a de quem o põe
+ * (ex: branco numa bolha navy de conversa).
+ */
+export declare const richTextContentClasses: string;
+/** Parece HTML (tem pelo menos uma marca)? Textos antigos, guardados sem formatação, não. */
+export declare function isRichText(value: string | null | undefined): boolean;
+/** Texto simples → HTML: um parágrafo por linha (as linhas em branco ficam). */
+export declare function textToRichText(text: string): string;
+/**
+ * HTML seguro para pôr na página: só as marcas de formatação, sem scripts nem atributos de eventos.
+ * Texto sem marcas é convertido (uma linha, um parágrafo). Usar sempre antes de `dangerouslySetInnerHTML`.
+ */
+export declare function sanitizeRichText(value: string | null | undefined): string;
+/** Só o texto (ex: pré-visualização numa lista, notificação, pesquisa). Parágrafos e itens viram linhas. */
+export declare function richTextToPlain(value: string | null | undefined): string;
+/** Sem texto nem imagens (ex: `<p></p>` de um editor vazio)? Para validar "obrigatório". */
+export declare function richTextIsEmpty(value: string | null | undefined): boolean;

package/dist/types/v1/primitives/forms/RichTextEditor/RichTextEditor.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+export interface RichTextEditorLabels {
+    bold: string;
+    italic: string;
+    underline: string;
+    strike: string;
+    bulletList: string;
+    orderedList: string;
+    quote: string;
+    image: string;
+    maximize: string;
+    restore: string;
+}
+export interface RichTextEditorProps {
+    /** O texto, em HTML. Texto simples (antigo, sem formatação) também serve: cada linha vira um parágrafo. */
+    value: string;
+    /** Recebe o HTML a cada alteração; `''` quando fica vazio (para validar "obrigatório" sem olhar para `<p></p>`). */
+    onChange: (html: string) => void;
+    placeholder?: string;
+    /** Marca o campo a vermelho (ex: obrigatório por preencher ao submeter). */
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Altura mínima da área de escrita, em px. Por omissão 80. */
+    minHeight?: number;
+    /** Altura máxima (px ou CSS, ex: `'50vh'`): cresce com o texto até aqui e depois faz scroll por dentro. Sem isto, cresce sempre. */
+    maxHeight?: number | string;
+    /**
+     * Onde guardar uma imagem (escolhida na barra, colada ou largada); devolve o `src` a pôr no texto.
+     * Sem isto, o editor não aceita imagens.
+     */
+    onUploadImage?: (file: File) => Promise<string>;
+    /** Mostra na barra o botão para escrever com o editor em ecrã quase inteiro (Esc volta). */
+    maximizable?: boolean;
+    /**
+     * Enviar com o teclado (ex: uma conversa): Ctrl+Enter chama-o sempre. Com `submitOnEnter`,
+     * também o Enter — exceto dentro de uma lista, onde o Enter cria o item seguinte. Shift+Enter muda de linha.
+     */
+    onSubmit?: () => void;
+    submitOnEnter?: boolean;
+    autoFocus?: boolean;
+    /** Nome acessível, quando não há etiqueta à volta (ex: "Escrever comentário"). */
+    'aria-label'?: string;
+    id?: string;
+    /** Aplica-se à caixa à volta. */
+    className?: string;
+    /** Textos da barra (para outra língua). */
+    labels?: Partial<RichTextEditorLabels>;
+}
+/**
+ * Texto com formatação, que se vê enquanto se escreve: negrito, itálico, sublinhado, riscado,
+ * listas, citações e (com `onUploadImage`) imagens. Atalhos habituais: Ctrl+B, Ctrl+I, Ctrl+U;
+ * "- " ou "1. " no início da linha começam uma lista.
+ *
+ * Guarda HTML. Para o mostrar, usar sempre o [RichText](?path=/docs/v1-primitives-display-richtext--docs),
+ * que o limpa antes de entrar na página. Para validar "obrigatório", o `onChange` dá `''` quando está vazio
+ * (ou `richTextIsEmpty`).
+ *
+ * Para uma conversa: `onSubmit` + `submitOnEnter` (Enter envia, Shift+Enter muda de linha) e `maxHeight`
+ * para crescer com o texto até um limite.
+ *
+ * Dentro de um [FormField](?path=/docs/v1-components-forms-formfield--docs) fica com o `id` do campo.
+ */
+export declare function RichTextEditor({ value, onChange, placeholder, invalid, disabled, minHeight, maxHeight, onUploadImage, maximizable, onSubmit, submitOnEnter, autoFocus, 'aria-label': ariaLabel, id, className, labels: labelsProp, }: RichTextEditorProps): React.JSX.Element | null;
+export default RichTextEditor;

package/dist/types/v1/primitives/lists/ListItem/ListItem.d.ts

@@ -1,14 +1,22 @@
 import React from 'react';
 /** O que se mostra num ListItem: o resto (ativo, marcado) é estado. */
 export interface ListItemContent {
-    /** A linha principal (ex: a descrição). Numa linha só, cortada com "…" se não couber. */
+    /** Por baixo do código: o que a linha é (ex: a descrição). Até duas linhas, cortada com "…" se não couber. */
     title: React.ReactNode;
-    /** Por cima do título, pequeno e em letra de máquina (ex: o número ou código). */
+    /** O texto mais forte da linha, em letra de máquina (ex: o número ou código). */
     code?: React.ReactNode;
-    /** A primeira linha: etiquetas e avisos (ex: a categoria). */
+    /** Na linha do código, logo a seguir a ele: indicadores e avisos curtos. */
     badges?: React.ReactNode;
-    /** Por baixo do título: o resto do que se quer ver de relance (local, data, indicadores). */
+    /** Por baixo do título, pequeno e numa linha só (cortada com "…"): o resto do que se quer ver de relance, separado por " · " (ex: local · data). */
     meta?: React.ReactNode;
+    /**
+     * Opcional, e só com caixa de marcar (`onCheckedChange`): uma etiqueta curta
+     * (ex: a categoria) no espaço que a caixa abre por baixo dela. Sem caixa não
+     * se mostra — não há coluna para ela.
+     */
+    tag?: React.ReactNode;
+    /** À direita, ao nível do código: marcas que se querem ver mesmo a correr a lista. */
+    aside?: React.ReactNode;
 }
 export interface ListItemProps extends ListItemContent {
     /** O que está aberto ao lado (fica realçado). */
@@ -20,17 +28,40 @@ export interface ListItemProps extends ListItemContent {
     onCheckedChange?: (checked: boolean) => void;
     /** O nome da caixa de marcar, para leitores de ecrã (ex: "Marcar P-020000"). */
     checkboxLabel?: string;
+    /**
+     * O que se procurou: realça-se no código e no título quando são texto (sem
+     * acentos nem maiúsculas). O [ListFinder](?path=/docs/v1-components-lists-listfinder--docs) passa-o sozinho.
+     */
+    highlight?: string[];
     className?: string;
 }
+/**
+ * A linha entre linhas, esbatida nas pontas: uma risca de ponta a ponta
+ * fechava cada linha numa caixa. Desenhada como fundo (e não com um ::after,
+ * que o botão da linha já usa); a última linha não a leva.
+ */
+export declare const LINHA_ESBATIDA = "bg-[linear-gradient(to_right,transparent,var(--color-slate-200)_15%,var(--color-slate-200)_85%,transparent)] bg-[length:100%_1px] bg-bottom bg-no-repeat last:bg-none";
+/**
+ * Texto com os pedaços que batem com a pesquisa realçados: numa descrição
+ * comprida, ou num número de dez dígitos, não se via onde é que o que se
+ * escreveu bateu.
+ */
+export declare function HighlightText({ text, terms }: {
+    text: string;
+    terms?: string[];
+}): React.JSX.Element;
 /**
  * Uma linha de uma lista para escolher: o cartão das listas do
  * [ListFinder](?path=/docs/v1-components-lists-listfinder--docs).
  *
- * Não sabe o que mostra: a app dá as partes (etiquetas, código, título,
- * detalhes) e o ListItem arruma-as sempre da mesma forma. Com
+ * Não sabe o que mostra: a app dá as partes e o ListItem arruma-as sempre da
+ * mesma forma. O código é o texto mais forte da linha, com os indicadores ao
+ * lado; o título vem por baixo, mais pequeno, e o resto por baixo dele. Com
  * `onCheckedChange` leva uma caixa à esquerda, para marcar vários (um
- * [Checkbox](?path=/docs/v1-primitives-forms-checkbox--docs)).
+ * [Checkbox](?path=/docs/v1-primitives-forms-checkbox--docs)), numa coluna de
+ * largura fixa — senão os títulos começavam em sítios diferentes de linha para
+ * linha — e, se se quiser, a `tag` por baixo dela.
  *
  * É um `<li>`: vai dentro de um `<ul>`.
  */
-export default function ListItem({ title, code, badges, meta, active, onClick, checked, onCheckedChange, checkboxLabel, className, }: ListItemProps): React.JSX.Element;
+export default function ListItem({ title, code, badges, meta, tag, aside, active, onClick, checked, onCheckedChange, checkboxLabel, highlight, className, }: ListItemProps): React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proef/common-ui",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "description": "",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -93,10 +93,15 @@
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@tiptap/extension-image": "^3.32.0",
+    "@tiptap/pm": "^3.32.0",
+    "@tiptap/react": "^3.32.0",
+    "@tiptap/starter-kit": "^3.32.0",
     "@zxing/library": "^0.23.0",
     "axios": "^1.8.1",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "dompurify": "^3.4.17",
     "iconoir-react": "^7.11.0",
     "js-cookie": "^3.0.5",
     "keycloak-js": "^25.0.0",