@nomosui/react 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +65 -0
- package/SKILL.md +166 -0
- package/dist/index.js +4591 -0
- package/dist/mcp/bin.js +46371 -0
- package/dist/types/catalogue/contract.d.ts +78 -0
- package/dist/types/catalogue/registry.d.ts +33 -0
- package/dist/types/components/alert/alert.d.ts +30 -0
- package/dist/types/components/alert/manifest.d.ts +3 -0
- package/dist/types/components/badge/badge.d.ts +25 -0
- package/dist/types/components/badge/manifest.d.ts +7 -0
- package/dist/types/components/button/button.d.ts +38 -0
- package/dist/types/components/button/manifest.d.ts +7 -0
- package/dist/types/components/card/card.d.ts +12 -0
- package/dist/types/components/card/manifest.d.ts +3 -0
- package/dist/types/components/checkbox/checkbox.d.ts +4 -0
- package/dist/types/components/checkbox/manifest.d.ts +3 -0
- package/dist/types/components/chip/chip.d.ts +36 -0
- package/dist/types/components/chip/manifest.d.ts +3 -0
- package/dist/types/components/counter/counter.d.ts +14 -0
- package/dist/types/components/counter/manifest.d.ts +3 -0
- package/dist/types/components/data-table-pagination/data-table-pagination.d.ts +20 -0
- package/dist/types/components/data-table-pagination/manifest.d.ts +3 -0
- package/dist/types/components/data-table-toolbar/data-table-toolbar.d.ts +34 -0
- package/dist/types/components/data-table-toolbar/manifest.d.ts +3 -0
- package/dist/types/components/empty-state/empty-state.d.ts +23 -0
- package/dist/types/components/empty-state/manifest.d.ts +3 -0
- package/dist/types/components/facet-filter/facet-filter.d.ts +23 -0
- package/dist/types/components/facet-filter/manifest.d.ts +6 -0
- package/dist/types/components/field/field.d.ts +15 -0
- package/dist/types/components/field/manifest.d.ts +3 -0
- package/dist/types/components/fieldset/fieldset.d.ts +3 -0
- package/dist/types/components/fieldset/manifest.d.ts +3 -0
- package/dist/types/components/form/form.d.ts +14 -0
- package/dist/types/components/form/manifest.d.ts +3 -0
- package/dist/types/components/freshness/freshness.d.ts +18 -0
- package/dist/types/components/freshness/manifest.d.ts +7 -0
- package/dist/types/components/input/input.d.ts +6 -0
- package/dist/types/components/input/manifest.d.ts +6 -0
- package/dist/types/components/label/label.d.ts +3 -0
- package/dist/types/components/label/manifest.d.ts +3 -0
- package/dist/types/components/meter/manifest.d.ts +6 -0
- package/dist/types/components/meter/meter.d.ts +23 -0
- package/dist/types/components/number-field/manifest.d.ts +3 -0
- package/dist/types/components/number-field/number-field.d.ts +7 -0
- package/dist/types/components/progress-bar/manifest.d.ts +3 -0
- package/dist/types/components/progress-bar/progress-bar.d.ts +12 -0
- package/dist/types/components/radio/manifest.d.ts +3 -0
- package/dist/types/components/radio/radio.d.ts +5 -0
- package/dist/types/components/rating/manifest.d.ts +3 -0
- package/dist/types/components/rating/rating.d.ts +19 -0
- package/dist/types/components/search-field/manifest.d.ts +3 -0
- package/dist/types/components/search-field/search-field.d.ts +14 -0
- package/dist/types/components/separator/manifest.d.ts +3 -0
- package/dist/types/components/separator/separator.d.ts +7 -0
- package/dist/types/components/skeleton/manifest.d.ts +3 -0
- package/dist/types/components/skeleton/skeleton.d.ts +3 -0
- package/dist/types/components/switch/manifest.d.ts +3 -0
- package/dist/types/components/switch/switch.d.ts +4 -0
- package/dist/types/components/table/manifest.d.ts +7 -0
- package/dist/types/components/table/table.d.ts +14 -0
- package/dist/types/components/textarea/manifest.d.ts +3 -0
- package/dist/types/components/textarea/textarea.d.ts +3 -0
- package/dist/types/components/timeline/manifest.d.ts +3 -0
- package/dist/types/components/timeline/timeline.d.ts +19 -0
- package/dist/types/components/toast/manifest.d.ts +3 -0
- package/dist/types/components/toast/toast.d.ts +35 -0
- package/dist/types/components/toggle/manifest.d.ts +3 -0
- package/dist/types/components/toggle/toggle.d.ts +31 -0
- package/dist/types/components/toggle-group/manifest.d.ts +6 -0
- package/dist/types/components/toggle-group/toggle-group.d.ts +8 -0
- package/dist/types/components/tree/manifest.d.ts +7 -0
- package/dist/types/components/tree/tree.d.ts +42 -0
- package/dist/types/features/data-table-features.d.ts +29 -0
- package/dist/types/features/faceted-data-table.d.ts +99 -0
- package/dist/types/features/toast.d.ts +33 -0
- package/dist/types/index.d.ts +112 -0
- package/dist/types/internal/dropdown-menu.d.ts +27 -0
- package/dist/types/internal/select.d.ts +13 -0
- package/dist/types/internal/sheet.d.ts +25 -0
- package/dist/types/internal/tooltip.d.ts +7 -0
- package/dist/types/lib/cn.d.ts +6 -0
- package/dist/types/lib/tone.d.ts +12 -0
- package/dist/types/tokens/build.d.mts +68 -0
- package/dist/types/tokens/resource.d.ts +8 -0
- package/dist/types/tokens/skin.d.ts +9 -0
- package/package.json +107 -0
- package/scripts/install-skill.mjs +28 -0
- package/tokens/theme.css +63 -0
- package/tokens/tokens.generated.css +271 -0
- package/tokens/tokens.json +225 -0
- package/tokens/tokens.resource.json +138 -0
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
/**
|
|
3
|
+
* Le contrat d'un manifeste de composant (ADR 0005).
|
|
4
|
+
*
|
|
5
|
+
* Le manifeste est écrit à la main, colocalisé avec son composant
|
|
6
|
+
* (`src/components/<nom>/manifest.ts`), et validé ici : une erreur de forme se voit à
|
|
7
|
+
* l'import du catalogue, pas dans la page de style ni dans le serveur MCP.
|
|
8
|
+
*
|
|
9
|
+
* `usages` est obligatoire et non vide : c'est la partie qu'un agent vient chercher —
|
|
10
|
+
* l'intention (« quel badge pour un statut de production »), pas seulement le type.
|
|
11
|
+
*/
|
|
12
|
+
export declare const componentPropSchema: z.ZodObject<{
|
|
13
|
+
name: z.ZodString;
|
|
14
|
+
type: z.ZodString;
|
|
15
|
+
required: z.ZodBoolean;
|
|
16
|
+
default: z.ZodOptional<z.ZodString>;
|
|
17
|
+
check: z.ZodEnum<{
|
|
18
|
+
attribute: "attribute";
|
|
19
|
+
class: "class";
|
|
20
|
+
content: "content";
|
|
21
|
+
rendered: "rendered";
|
|
22
|
+
accepted: "accepted";
|
|
23
|
+
}>;
|
|
24
|
+
description: z.ZodString;
|
|
25
|
+
}, z.core.$strict>;
|
|
26
|
+
export declare const componentVariantSchema: z.ZodObject<{
|
|
27
|
+
name: z.ZodString;
|
|
28
|
+
values: z.ZodArray<z.ZodString>;
|
|
29
|
+
default: z.ZodOptional<z.ZodString>;
|
|
30
|
+
description: z.ZodString;
|
|
31
|
+
}, z.core.$strict>;
|
|
32
|
+
export declare const componentUsageSchema: z.ZodObject<{
|
|
33
|
+
when: z.ZodString;
|
|
34
|
+
use: z.ZodString;
|
|
35
|
+
avoid: z.ZodOptional<z.ZodString>;
|
|
36
|
+
}, z.core.$strict>;
|
|
37
|
+
export declare const componentManifestSchema: z.ZodObject<{
|
|
38
|
+
name: z.ZodString;
|
|
39
|
+
title: z.ZodString;
|
|
40
|
+
summary: z.ZodString;
|
|
41
|
+
level: z.ZodEnum<{
|
|
42
|
+
jeton: "jeton";
|
|
43
|
+
primitive: "primitive";
|
|
44
|
+
bloc: "bloc";
|
|
45
|
+
}>;
|
|
46
|
+
props: z.ZodArray<z.ZodObject<{
|
|
47
|
+
name: z.ZodString;
|
|
48
|
+
type: z.ZodString;
|
|
49
|
+
required: z.ZodBoolean;
|
|
50
|
+
default: z.ZodOptional<z.ZodString>;
|
|
51
|
+
check: z.ZodEnum<{
|
|
52
|
+
attribute: "attribute";
|
|
53
|
+
class: "class";
|
|
54
|
+
content: "content";
|
|
55
|
+
rendered: "rendered";
|
|
56
|
+
accepted: "accepted";
|
|
57
|
+
}>;
|
|
58
|
+
description: z.ZodString;
|
|
59
|
+
}, z.core.$strict>>;
|
|
60
|
+
variants: z.ZodArray<z.ZodObject<{
|
|
61
|
+
name: z.ZodString;
|
|
62
|
+
values: z.ZodArray<z.ZodString>;
|
|
63
|
+
default: z.ZodOptional<z.ZodString>;
|
|
64
|
+
description: z.ZodString;
|
|
65
|
+
}, z.core.$strict>>;
|
|
66
|
+
example: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
|
|
67
|
+
usages: z.ZodArray<z.ZodObject<{
|
|
68
|
+
when: z.ZodString;
|
|
69
|
+
use: z.ZodString;
|
|
70
|
+
avoid: z.ZodOptional<z.ZodString>;
|
|
71
|
+
}, z.core.$strict>>;
|
|
72
|
+
}, z.core.$strict>;
|
|
73
|
+
export type ComponentManifest = z.infer<typeof componentManifestSchema>;
|
|
74
|
+
export type ComponentProp = z.infer<typeof componentPropSchema>;
|
|
75
|
+
export type ComponentVariant = z.infer<typeof componentVariantSchema>;
|
|
76
|
+
export type ComponentUsage = z.infer<typeof componentUsageSchema>;
|
|
77
|
+
/** Le message d'erreur d'un manifeste invalide : quel composant, quel champ, quoi. */
|
|
78
|
+
export declare function errorMessage(schemaName: string, error: z.ZodError): string;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import type { ComponentType } from 'react';
|
|
2
|
+
import { type ComponentManifest } from './contract';
|
|
3
|
+
/**
|
|
4
|
+
* L'index du catalogue : **un inventaire, deux rendus** (ADR 0005). La page de style
|
|
5
|
+
* le lit pour un humain, le serveur MCP le servira à un agent, et le test de cohérence
|
|
6
|
+
* le confronte aux props réelles.
|
|
7
|
+
*
|
|
8
|
+
* Chaque entrée porte le manifeste, le composant lui-même (pour que la page de style
|
|
9
|
+
* le rende et que le test l'interroge) et la config de variantes du composant, indexée
|
|
10
|
+
* par le nom de la prop qui les porte.
|
|
11
|
+
*/
|
|
12
|
+
type VariantsConfig = {
|
|
13
|
+
variants?: Record<string, Record<string, unknown>>;
|
|
14
|
+
defaultVariants?: Record<string, unknown>;
|
|
15
|
+
};
|
|
16
|
+
export type CatalogueEntry = {
|
|
17
|
+
manifest: ComponentManifest;
|
|
18
|
+
component: ComponentType<Record<string, unknown>>;
|
|
19
|
+
variantsConfig: Record<string, VariantsConfig>;
|
|
20
|
+
};
|
|
21
|
+
export declare const catalogueEntries: CatalogueEntry[];
|
|
22
|
+
/**
|
|
23
|
+
* Valide l'index : chaque manifeste respecte le contrat, et deux composants ne portent
|
|
24
|
+
* pas le même nom. Une entrée refusée dit laquelle et pourquoi.
|
|
25
|
+
*/
|
|
26
|
+
export declare function validateCatalogue(entries: CatalogueEntry[]): CatalogueEntry[];
|
|
27
|
+
/** Le catalogue validé — c'est celui-là qu'on expose. */
|
|
28
|
+
export declare const catalogue: CatalogueEntry[];
|
|
29
|
+
/** Les noms des composants du catalogue, dans l'ordre de l'index. */
|
|
30
|
+
export declare const componentNames: string[];
|
|
31
|
+
/** Le composant et son manifeste, ou une erreur qui dit ce qui manque. */
|
|
32
|
+
export declare function findComponent(name: string): CatalogueEntry;
|
|
33
|
+
export {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type Tone } from '../../lib/tone';
|
|
3
|
+
type AlertBase = {
|
|
4
|
+
/** Le ton : une intention, pas une couleur (cf. `toneClasses`). Défaut `info`. */
|
|
5
|
+
tone?: Tone;
|
|
6
|
+
/** Le titre du bandeau : court, jamais une phrase. */
|
|
7
|
+
title: string;
|
|
8
|
+
/** Le contenu détaillé, sous le titre. */
|
|
9
|
+
children?: ReactNode;
|
|
10
|
+
/** Ce qu'on peut faire : un bouton, un lien. */
|
|
11
|
+
action?: ReactNode;
|
|
12
|
+
/** Remplace l'icône par défaut du ton. */
|
|
13
|
+
icon?: ReactNode;
|
|
14
|
+
/** Les classes de l'appelant, fusionnées après celles du cœur. */
|
|
15
|
+
className?: string;
|
|
16
|
+
};
|
|
17
|
+
/**
|
|
18
|
+
* Le bouton de fermeture exige son libellé accessible : `onClose` et `closeLabel` vont
|
|
19
|
+
* ensemble, ou pas du tout (le cœur n'a pas d'i18n, il n'invente aucun texte).
|
|
20
|
+
*/
|
|
21
|
+
type AlertClose = {
|
|
22
|
+
onClose?: undefined;
|
|
23
|
+
closeLabel?: undefined;
|
|
24
|
+
} | {
|
|
25
|
+
onClose: () => void;
|
|
26
|
+
closeLabel: string;
|
|
27
|
+
};
|
|
28
|
+
export type AlertProps = AlertBase & AlertClose;
|
|
29
|
+
export declare function Alert({ tone, title, children, action, icon, onClose, closeLabel, className, }: AlertProps): import("react").JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
/**
|
|
4
|
+
* La config des variantes est exportée à côté de `badgeVariants` : le catalogue la lit
|
|
5
|
+
* pour vérifier que le manifeste ne dérive pas des props réelles (ADR 0005). cva ne
|
|
6
|
+
* porte pas la config sur la fonction qu'il rend, donc on l'écrit ici, une fois.
|
|
7
|
+
*/
|
|
8
|
+
export declare const badgeVariantsConfig: {
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: string;
|
|
12
|
+
secondary: string;
|
|
13
|
+
destructive: string;
|
|
14
|
+
outline: string;
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
defaultVariants: {
|
|
18
|
+
variant: "default";
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
export declare const badgeVariants: (props?: ({
|
|
22
|
+
variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
|
|
23
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
24
|
+
export type BadgeProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof badgeVariants>;
|
|
25
|
+
export declare const Badge: ({ className, variant, ...props }: BadgeProps) => import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste du Badge (ADR 0005). Il est écrit à la main : le type se génère,
|
|
4
|
+
* l'usage s'écrit. Le test de cohérence du catalogue le confronte aux props réelles —
|
|
5
|
+
* une variante ajoutée au composant sans passer ici fait rougir le test.
|
|
6
|
+
*/
|
|
7
|
+
export declare const badgeManifest: ComponentManifest;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
3
|
+
/**
|
|
4
|
+
* Le bouton du cœur. La config des variantes est exportée à côté de `buttonVariants`,
|
|
5
|
+
* comme celle du Badge : le catalogue la lit pour vérifier que le manifeste ne dérive
|
|
6
|
+
* pas des props réelles (ADR 0005).
|
|
7
|
+
*/
|
|
8
|
+
export declare const buttonVariantsConfig: {
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
default: string;
|
|
12
|
+
destructive: string;
|
|
13
|
+
outline: string;
|
|
14
|
+
secondary: string;
|
|
15
|
+
ghost: string;
|
|
16
|
+
link: string;
|
|
17
|
+
};
|
|
18
|
+
size: {
|
|
19
|
+
default: string;
|
|
20
|
+
sm: string;
|
|
21
|
+
lg: string;
|
|
22
|
+
icon: string;
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
defaultVariants: {
|
|
26
|
+
variant: "default";
|
|
27
|
+
size: "default";
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export declare const buttonVariants: (props?: ({
|
|
31
|
+
variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
32
|
+
size?: "icon" | "default" | "sm" | "lg" | null | undefined;
|
|
33
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
34
|
+
export type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
|
|
35
|
+
/** Rend le style sur l'enfant au lieu d'un `<button>` (Radix `Slot`). */
|
|
36
|
+
asChild?: boolean;
|
|
37
|
+
};
|
|
38
|
+
export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste du Bouton (ADR 0005). Il déclare les deux groupes de variantes —
|
|
4
|
+
* `variant` (le ton) et `size` (la taille) — que le test de cohérence confronte à la
|
|
5
|
+
* config réelle.
|
|
6
|
+
*/
|
|
7
|
+
export declare const buttonManifest: ComponentManifest;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* La carte : une surface qui regroupe un contenu apparenté — un en-tête (titre +
|
|
4
|
+
* description), un corps, un pied. En parts importables séparément ; aucune part ne
|
|
5
|
+
* nomme un produit, les textes viennent de l'appelant.
|
|
6
|
+
*/
|
|
7
|
+
export declare function Card({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
8
|
+
export declare function CardHeader({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
9
|
+
export declare function CardTitle({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
10
|
+
export declare function CardDescription({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
11
|
+
export declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
12
|
+
export declare function CardFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
3
|
+
/** Une case à cocher contrôlée. Le cœur fournit l'apparence et l'a11y (Radix), pas l'état. */
|
|
4
|
+
export declare function Checkbox({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>): import("react").JSX.Element;
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type Tone } from '../../lib/tone';
|
|
3
|
+
/** La hauteur d'une puce selon sa taille. */
|
|
4
|
+
export declare const chipSizeClasses: Record<'default' | 'sm', string>;
|
|
5
|
+
type ChipBase = {
|
|
6
|
+
/** Le ton : une intention, pas une couleur (cf. `toneClasses`). Défaut `neutral`. */
|
|
7
|
+
tone?: Tone;
|
|
8
|
+
/** La taille de la puce. Défaut `default`. */
|
|
9
|
+
size?: 'default' | 'sm';
|
|
10
|
+
/** Une icône de tête, fournie par l'appelant. */
|
|
11
|
+
icon?: ReactNode;
|
|
12
|
+
/** Le libellé de la puce : court, jamais une phrase. */
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
/** Désactive le bouton de retrait. */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/** Les classes de l'appelant, fusionnées après celles du cœur. */
|
|
17
|
+
className?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Le bouton de retrait exige son libellé accessible : `onRemove` et `removeLabel` vont
|
|
21
|
+
* ensemble, ou pas du tout (le cœur n'a pas d'i18n, il n'invente aucun texte).
|
|
22
|
+
*/
|
|
23
|
+
type ChipRemove = {
|
|
24
|
+
onRemove: () => void;
|
|
25
|
+
removeLabel: string;
|
|
26
|
+
} | {
|
|
27
|
+
onRemove?: undefined;
|
|
28
|
+
removeLabel?: undefined;
|
|
29
|
+
};
|
|
30
|
+
export type ChipProps = ChipBase & ChipRemove;
|
|
31
|
+
/**
|
|
32
|
+
* La puce : une étiquette compacte, éventuellement retirable. Présentation seule — l'app
|
|
33
|
+
* fournit le libellé, l'icône et l'action de retrait (ADR 0015).
|
|
34
|
+
*/
|
|
35
|
+
export declare function Chip({ tone, size, icon, children, onRemove, removeLabel, disabled, className, }: ChipProps): import("react").JSX.Element;
|
|
36
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Le compteur (ADR 0015) : un nombre mis en avant, avec un suffixe et un libellé fournis
|
|
4
|
+
* par l'app. Aucun formatage, aucune unité, aucune animation dans le cœur — le formatage
|
|
5
|
+
* appartient à l'app (ADR 0010).
|
|
6
|
+
*/
|
|
7
|
+
export type CounterProps = HTMLAttributes<HTMLSpanElement> & {
|
|
8
|
+
value: number;
|
|
9
|
+
/** L'unité ou le signe qui suit le nombre (`%`, `s`, `pts`), fourni par l'appelant. */
|
|
10
|
+
suffix?: string;
|
|
11
|
+
/** Le nom de ce qui est compté. */
|
|
12
|
+
label?: string;
|
|
13
|
+
};
|
|
14
|
+
export declare function Counter({ value, suffix, label, className, ...props }: CounterProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* La pagination d'une table, en atome autonome : elle ne connaît pas TanStack, seulement
|
|
3
|
+
* la page, les bornes et les rappels. Elle se rend donc hors d'une table. Aucun libellé
|
|
4
|
+
* ne vient de l'app — ils sont injectés (ADR 0010).
|
|
5
|
+
*/
|
|
6
|
+
export type DataTablePaginationProps = {
|
|
7
|
+
page: number;
|
|
8
|
+
pageCount: number;
|
|
9
|
+
pageSize: number;
|
|
10
|
+
onPageSizeChange: (size: number) => void;
|
|
11
|
+
onPrevious: () => void;
|
|
12
|
+
onNext: () => void;
|
|
13
|
+
canPrevious: boolean;
|
|
14
|
+
canNext: boolean;
|
|
15
|
+
rowsLabel: string;
|
|
16
|
+
pageOf: (page: number, total: number) => string;
|
|
17
|
+
previousLabel: string;
|
|
18
|
+
nextLabel: string;
|
|
19
|
+
};
|
|
20
|
+
export declare function DataTablePagination({ page, pageCount, pageSize, onPageSizeChange, onPrevious, onNext, canPrevious, canNext, rowsLabel, pageOf, previousLabel, nextLabel, }: DataTablePaginationProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
import { type Facet } from '../facet-filter/facet-filter';
|
|
3
|
+
/**
|
|
4
|
+
* La barre d'outils d'une table : la recherche, les facettes, la gestion des colonnes et
|
|
5
|
+
* le compte affiché. Elle ne connaît ni l'i18n de l'app ni ses query-params — libellés et
|
|
6
|
+
* état sont injectés (ADR 0010).
|
|
7
|
+
*/
|
|
8
|
+
export type DataTableColumnOption = {
|
|
9
|
+
id: string;
|
|
10
|
+
label: string;
|
|
11
|
+
visible: boolean;
|
|
12
|
+
};
|
|
13
|
+
export type DataTableToolbarProps = {
|
|
14
|
+
globalFilter: string;
|
|
15
|
+
onGlobalFilterChange: (value: string) => void;
|
|
16
|
+
placeholder: string;
|
|
17
|
+
facets: Facet[];
|
|
18
|
+
shownLabel: string;
|
|
19
|
+
canReset: boolean;
|
|
20
|
+
resetLabel: string;
|
|
21
|
+
clearFacetLabel: string;
|
|
22
|
+
onReset: () => void;
|
|
23
|
+
columns?: {
|
|
24
|
+
label: string;
|
|
25
|
+
clearLabel: string;
|
|
26
|
+
options: DataTableColumnOption[];
|
|
27
|
+
onToggle: (id: string, visible: boolean) => void;
|
|
28
|
+
onMove?: (id: string, direction: -1 | 1) => void;
|
|
29
|
+
moveUpLabel?: (label: string) => string;
|
|
30
|
+
moveDownLabel?: (label: string) => string;
|
|
31
|
+
};
|
|
32
|
+
actions?: ReactNode;
|
|
33
|
+
};
|
|
34
|
+
export declare function DataTableToolbar({ globalFilter, onGlobalFilterChange, placeholder, facets, shownLabel, canReset, resetLabel, clearFacetLabel, onReset, columns, actions, }: DataTableToolbarProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* L'état vide d'une vue : une carte centrée à montrer quand une donnée manque ou est vide.
|
|
4
|
+
* **Aucun moteur** — l'app fournit l'icône, les textes et l'action (ADR 0015). Le `detail`
|
|
5
|
+
* brut sert à nommer la vraie panne plutôt que de la masquer.
|
|
6
|
+
*/
|
|
7
|
+
export type EmptyStateProps = {
|
|
8
|
+
/** L'illustration ou l'icône, fournie par l'appelant. */
|
|
9
|
+
icon?: ReactNode;
|
|
10
|
+
/** Le titre de l'état : court, jamais une phrase. */
|
|
11
|
+
title: string;
|
|
12
|
+
/** Une description d'une phrase, optionnelle. */
|
|
13
|
+
description?: string;
|
|
14
|
+
/** Le détail brut (message d'erreur, cause) — affiché tel quel, jamais masqué. */
|
|
15
|
+
detail?: string;
|
|
16
|
+
/** Ce qu'on peut faire devant cet état : un bouton, un lien. */
|
|
17
|
+
action?: ReactNode;
|
|
18
|
+
/** Passer le détail sur plusieurs lignes plutôt que de le laisser défiler. */
|
|
19
|
+
wrap?: boolean;
|
|
20
|
+
/** Les classes de l'appelant, fusionnées après celles du cœur. */
|
|
21
|
+
className?: string;
|
|
22
|
+
};
|
|
23
|
+
export declare function EmptyState({ icon, title, description, detail, action, wrap, className, }: EmptyStateProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Le filtre à facettes : un menu à choix multiples sur une facette. Il ne connaît ni
|
|
3
|
+
* la table ni l'i18n de l'app — les options, la sélection et le libellé « effacer »
|
|
4
|
+
* sont injectés (ADR 0010).
|
|
5
|
+
*/
|
|
6
|
+
export type FacetOption = {
|
|
7
|
+
value: string;
|
|
8
|
+
label: string;
|
|
9
|
+
count: number;
|
|
10
|
+
};
|
|
11
|
+
export type Facet = {
|
|
12
|
+
id: string;
|
|
13
|
+
label: string;
|
|
14
|
+
options: FacetOption[];
|
|
15
|
+
selected: string[];
|
|
16
|
+
onChange: (next: string[]) => void;
|
|
17
|
+
};
|
|
18
|
+
export type FacetFilterProps = Omit<Facet, 'id'> & {
|
|
19
|
+
/** Le libellé de l'entrée qui efface la sélection (le cœur n'a pas d'i18n). */
|
|
20
|
+
clearLabel: string;
|
|
21
|
+
className?: string;
|
|
22
|
+
};
|
|
23
|
+
export declare function FacetFilter({ label, options, selected, onChange, clearLabel, className, }: FacetFilterProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste du filtre à facettes (ADR 0005). Les options, la sélection et les
|
|
4
|
+
* libellés sont injectés : c'est ce qui l'importe hors d'une table.
|
|
5
|
+
*/
|
|
6
|
+
export declare const facetFilterManifest: ComponentManifest;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* L'emplacement d'un champ : le libellé, le contrôle (fourni par l'appelant) et, dessous,
|
|
4
|
+
* soit le message d'erreur, soit l'aide. **Aucun moteur** : l'app décide de l'état, de la
|
|
5
|
+
* validation et du texte (ADR 0015). Le cœur ne fait que disposer.
|
|
6
|
+
*/
|
|
7
|
+
export type FieldProps = {
|
|
8
|
+
label?: ReactNode;
|
|
9
|
+
hint?: ReactNode;
|
|
10
|
+
error?: string | null;
|
|
11
|
+
htmlFor?: string;
|
|
12
|
+
className?: string;
|
|
13
|
+
children: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
export declare function Field({ label, hint, error, htmlFor, className, children }: FieldProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { ComponentProps, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Le bloc de mise en page d'un formulaire : une grille de champs et une zone d'actions,
|
|
4
|
+
* dans un `<form>` sémantique. **Aucun moteur** — aucune validation, aucun état, aucun
|
|
5
|
+
* texte : tout vient de l'appelant (ADR 0015). Les champs se groupent avec `Fieldset` et
|
|
6
|
+
* se posent avec `Field` ; les actions sont des nœuds fournis (boutons de l'app).
|
|
7
|
+
*/
|
|
8
|
+
export type FormProps = ComponentProps<'form'> & {
|
|
9
|
+
/** Deux colonnes de champs à partir du palier `md` ; une seule en dessous. */
|
|
10
|
+
columns?: 1 | 2;
|
|
11
|
+
/** La zone d'actions, alignée à droite sous les champs. */
|
|
12
|
+
actions?: ReactNode;
|
|
13
|
+
};
|
|
14
|
+
export declare function Form({ columns, actions, children, className, ...props }: FormProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* L'indicateur de fraîcheur d'une donnée : l'âge de la dernière mise à jour, avec une
|
|
4
|
+
* pastille qui vire au rouge quand la donnée est périmée. Il se rend seul, hors d'une
|
|
5
|
+
* table — une cellule comme un bandeau de provenance l'utilisent (ADR 0010).
|
|
6
|
+
*
|
|
7
|
+
* Aucun libellé ne vient de l'app : l'âge est déjà formaté par l'appelant (le cœur n'a
|
|
8
|
+
* pas d'i18n), et c'est l'appelant qui décide du seuil de péremption via `stale`.
|
|
9
|
+
*/
|
|
10
|
+
export type FreshnessProps = HTMLAttributes<HTMLSpanElement> & {
|
|
11
|
+
/** L'âge déjà formaté par l'appelant, ex. « il y a 2 heures ». */
|
|
12
|
+
label: string;
|
|
13
|
+
/** L'horodatage absolu, pour l'infobulle ; absent, pas d'infobulle. */
|
|
14
|
+
title?: string | null;
|
|
15
|
+
/** Vrai quand la donnée dépasse le seuil de péremption décidé par l'appelant. */
|
|
16
|
+
stale?: boolean;
|
|
17
|
+
};
|
|
18
|
+
export declare function Freshness({ label, title, stale, className, ...props }: FreshnessProps): import("react").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste de l'indicateur de fraîcheur (ADR 0005). L'âge est injecté par
|
|
4
|
+
* l'appelant : c'est lui qui formate (« il y a 2 heures ») et qui décide du seuil de
|
|
5
|
+
* péremption ; le cœur ne fait que le rendre.
|
|
6
|
+
*/
|
|
7
|
+
export declare const freshnessManifest: ComponentManifest;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Le champ de saisie du cœur : un `<input>` stylé par les tokens. Il n'impose aucune
|
|
4
|
+
* validation ni aucun état d'app — l'appelant passe ses props HTML et ses classes.
|
|
5
|
+
*/
|
|
6
|
+
export declare function Input({ className, type, ...props }: ComponentProps<'input'>): import("react").JSX.Element;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste du champ de saisie (ADR 0005). Le cœur ne pose ni validation ni état :
|
|
4
|
+
* l'appelant passe ses props HTML, la valeur et le rappel restent chez lui.
|
|
5
|
+
*/
|
|
6
|
+
export declare const inputManifest: ComponentManifest;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentManifest } from '../../catalogue/contract';
|
|
2
|
+
/**
|
|
3
|
+
* Le manifeste du Meter (ADR 0005). Il documente les deux tailles du même atome :
|
|
4
|
+
* la barre large, qui a besoin du libellé du seuil, et la barre compacte d'une cellule.
|
|
5
|
+
*/
|
|
6
|
+
export declare const meterManifest: ComponentManifest;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
type Scale = {
|
|
3
|
+
/** La valeur mesurée, sur `0..max`. */
|
|
4
|
+
value: number;
|
|
5
|
+
/** Le haut de l'échelle (`3` pour un score, `1` pour un Noul). */
|
|
6
|
+
max: number;
|
|
7
|
+
/** Le seuil de comparaison, marqué sur la barre. */
|
|
8
|
+
threshold?: number | null;
|
|
9
|
+
};
|
|
10
|
+
export type MeterProps = HTMLAttributes<HTMLDivElement> & Scale & {
|
|
11
|
+
label: string;
|
|
12
|
+
decimals?: number;
|
|
13
|
+
confidence?: number | null;
|
|
14
|
+
/** Le texte du seuil, donné par l'appelant (le cœur n'a pas d'i18n). */
|
|
15
|
+
thresholdLabel?: (threshold: number) => string;
|
|
16
|
+
};
|
|
17
|
+
export declare function Meter({ label, value, max, threshold, decimals, confidence, thresholdLabel, className, ...props }: MeterProps): import("react").JSX.Element;
|
|
18
|
+
export type CompactMeterProps = HTMLAttributes<HTMLDivElement> & Scale & {
|
|
19
|
+
label: string;
|
|
20
|
+
};
|
|
21
|
+
/** La même barre, en plus court : une cellule de table dense. */
|
|
22
|
+
export declare function CompactMeter({ label, value, max, threshold, className, ...props }: CompactMeterProps): import("react").JSX.Element;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ComponentProps } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Le champ numérique du cœur : un `<input>` en `type="number"`, donc le pas (`step`) et
|
|
4
|
+
* les bornes (`min`/`max`) viennent du natif. Aucune validation ni i18n : la valeur et le
|
|
5
|
+
* rappel restent chez l'appelant, comme `Input` (ADR 0015).
|
|
6
|
+
*/
|
|
7
|
+
export declare function NumberField({ type, ...props }: ComponentProps<'input'>): import("react").JSX.Element;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
export type ProgressBarProps = HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
/** L'avancement, sur `0..max`. */
|
|
4
|
+
value: number;
|
|
5
|
+
/** Le total : `100` par défaut. */
|
|
6
|
+
max?: number;
|
|
7
|
+
/** Le nom de ce qui avance ; sert aussi de nom accessible. */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Affiche le pourcentage à droite, calculé (jamais un texte produit). */
|
|
10
|
+
showValue?: boolean;
|
|
11
|
+
};
|
|
12
|
+
export declare function ProgressBar({ value, max, label, showValue, className, ...props }: ProgressBarProps): import("react").JSX.Element;
|