@ifto/mantine-kit 0.0.0-stage → 0.2.0

package/dist/component/organism/EChart/chart/UnitPanels.d.ts

@@ -0,0 +1,63 @@
+import type { EChartsOption } from 'echarts';
+import { ChartSeries, ChartUnit } from './ChartSeries';
+/**
+ * Splits the series of a chart into panels, one per unit, stacked vertically and sharing the same X axis of
+ * categories (small multiples). So series with different units (e.g. $ and %) never share the same Y axis, and each
+ * panel shows its unit in the name of the axis, without repeating the unit in the legend.
+ * @author Manoel Campos
+ */
+/** Series of the same unit, drawn in the same panel. */
+export type Panel = {
+    unit: ChartUnit;
+    series: ChartSeries[];
+};
+/** Room at the top of the chart, for the title and one legend row (px). */
+export declare const PANELS_TOP = 100;
+/** Height of each panel (px). */
+export declare const PANEL_HEIGHT = 280;
+/** Space between a panel and the next one, where the category labels of the upper panel are (px). */
+export declare const PANEL_GAP = 60;
+/** Room below the last panel, for the category labels (px). */
+export declare const BOTTOM_MARGIN = 40;
+/** Extra height for the zoom bar of the X axis, when it is shown (px). */
+export declare const ZOOM_HEIGHT = 50;
+/** From how many categories the X axis gets a zoom bar, so the columns are not squeezed. */
+export declare const MIN_CATEGORIES_FOR_ZOOM = 16;
+/**
+ * Formats a number in a compact way (e.g. 1,250,000 → "1.3M" in `en-US`, "1,3 mi" in `pt-BR`), so the axes are not
+ * cluttered. The full value stays in the tooltip.
+ * @param value value to format
+ * @param locale locale of the format; defaults to `en-US`
+ * @return the value in the compact format of the locale
+ */
+export declare function formatCompactNumber(value: number, locale?: string): string;
+/**
+ * Groups the series by the label of the unit, in the order each unit first appears.
+ * @param series series of the chart
+ * @return a panel per unit
+ */
+export declare function groupByUnit(series: ChartSeries[]): Panel[];
+/**
+ * Checks whether the X axis needs a zoom bar, so many categories are not squeezed.
+ * @param categoriesCount number of categories in the X axis
+ * @return true if the X axis should have a zoom bar
+ */
+export declare function needsZoom(categoriesCount: number): boolean;
+/**
+ * Computes the total height of the chart, which grows with the number of panels.
+ * @param panelsCount number of panels (different units)
+ * @param categoriesCount number of categories in the X axis, which defines whether there is a zoom bar
+ * @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)
+ * @return the height of the chart (px)
+ */
+export declare function panelsHeight(panelsCount: number, categoriesCount: number, extraTop?: number): number;
+/**
+ * Builds the grids and the axes of each panel. Panel `i` uses the grid, the X axis and the Y axis of index `i`.
+ * The pointers of the X axes are linked, so hovering a category highlights it in all panels.
+ * @param panels panels of the chart
+ * @param categories categories of the X axis
+ * @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)
+ * @param locale locale of the number format of the Y axes; defaults to `en-US`
+ * @return the parts of the ECharts `option` of the layout of the panels
+ */
+export declare function buildPanelAxes(panels: Panel[], categories: (string | number)[], extraTop?: number, locale?: string): Pick<EChartsOption, 'grid' | 'xAxis' | 'yAxis' | 'dataZoom' | 'axisPointer'>;

package/dist/component/organism/EChart/chart/UnitPanels.js

@@ -0,0 +1,127 @@
+"use client";
+import { DEFAULT_LOCALE } from "../../../../i18n/KitLocale.js";
+// src/component/organism/EChart/chart/UnitPanels.ts
+/** Room at the top of the chart, for the title and one legend row (px). */
+var PANELS_TOP = 100;
+/** Height of each panel (px). */
+var PANEL_HEIGHT = 280;
+/** Space between a panel and the next one, where the category labels of the upper panel are (px). */
+var PANEL_GAP = 60;
+/** Room below the last panel, for the category labels (px). */
+var BOTTOM_MARGIN = 40;
+/** Extra height for the zoom bar of the X axis, when it is shown (px). */
+var ZOOM_HEIGHT = 50;
+/** Side margins of the panels (px). The left one is wider to fit the values of the Y axis. */
+var LEFT_MARGIN = 80;
+var RIGHT_MARGIN = 40;
+/** From how many categories the X axis gets a zoom bar, so the columns are not squeezed. */
+var MIN_CATEGORIES_FOR_ZOOM = 16;
+/** Compact number formatters already created, by locale. */
+var compactFormatters = /* @__PURE__ */ new Map();
+/**
+* Formats a number in a compact way (e.g. 1,250,000 → "1.3M" in `en-US`, "1,3 mi" in `pt-BR`), so the axes are not
+* cluttered. The full value stays in the tooltip.
+* @param value value to format
+* @param locale locale of the format; defaults to `en-US`
+* @return the value in the compact format of the locale
+*/
+function formatCompactNumber(value, locale = DEFAULT_LOCALE) {
+	let formatter = compactFormatters.get(locale);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, {
+			notation: "compact",
+			maximumFractionDigits: 1
+		});
+		compactFormatters.set(locale, formatter);
+	}
+	return formatter.format(value);
+}
+/**
+* Groups the series by the label of the unit, in the order each unit first appears.
+* @param series series of the chart
+* @return a panel per unit
+*/
+function groupByUnit(series) {
+	const panels = /* @__PURE__ */ new Map();
+	series.forEach((serie) => {
+		const panel = panels.get(serie.unit.label) ?? {
+			unit: serie.unit,
+			series: []
+		};
+		panel.series.push(serie);
+		panels.set(serie.unit.label, panel);
+	});
+	return Array.from(panels.values());
+}
+/**
+* Checks whether the X axis needs a zoom bar, so many categories are not squeezed.
+* @param categoriesCount number of categories in the X axis
+* @return true if the X axis should have a zoom bar
+*/
+function needsZoom(categoriesCount) {
+	return categoriesCount >= 16;
+}
+/**
+* Computes the total height of the chart, which grows with the number of panels.
+* @param panelsCount number of panels (different units)
+* @param categoriesCount number of categories in the X axis, which defines whether there is a zoom bar
+* @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)
+* @return the height of the chart (px)
+*/
+function panelsHeight(panelsCount, categoriesCount, extraTop = 0) {
+	const panels = panelsCount * 280 + Math.max(panelsCount - 1, 0) * 60;
+	const zoom = needsZoom(categoriesCount) ? 50 : 0;
+	return 100 + extraTop + panels + 40 + zoom;
+}
+/**
+* Builds the grids and the axes of each panel. Panel `i` uses the grid, the X axis and the Y axis of index `i`.
+* The pointers of the X axes are linked, so hovering a category highlights it in all panels.
+* @param panels panels of the chart
+* @param categories categories of the X axis
+* @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)
+* @param locale locale of the number format of the Y axes; defaults to `en-US`
+* @return the parts of the ECharts `option` of the layout of the panels
+*/
+function buildPanelAxes(panels, categories, extraTop = 0, locale = DEFAULT_LOCALE) {
+	const indexes = panels.map((_, index) => index);
+	const categoryLabels = categories.map(String);
+	return {
+		grid: indexes.map((index) => ({
+			top: 100 + extraTop + index * 340,
+			height: 280,
+			left: LEFT_MARGIN,
+			right: RIGHT_MARGIN
+		})),
+		xAxis: indexes.map((index) => ({
+			type: "category",
+			gridIndex: index,
+			data: categoryLabels
+		})),
+		yAxis: panels.map((panel, index) => ({
+			type: "value",
+			gridIndex: index,
+			name: panel.unit.label,
+			axisLabel: { formatter: (value) => formatCompactNumber(value, locale) }
+		})),
+		dataZoom: needsZoom(categories.length) ? buildZoom(indexes) : [],
+		axisPointer: { link: [{ xAxisIndex: "all" }] }
+	};
+}
+/**
+* Creates the zoom bar (and the zoom by the mouse wheel) applied to all X axes at once.
+* @param xAxisIndexes indexes of the X axes of the panels
+* @return the ECharts `dataZoom` configuration
+*/
+function buildZoom(xAxisIndexes) {
+	return [{
+		type: "slider",
+		xAxisIndex: xAxisIndexes,
+		bottom: 10
+	}, {
+		type: "inside",
+		xAxisIndex: xAxisIndexes
+	}];
+}
+export { BOTTOM_MARGIN, MIN_CATEGORIES_FOR_ZOOM, PANELS_TOP, PANEL_GAP, PANEL_HEIGHT, ZOOM_HEIGHT, buildPanelAxes, formatCompactNumber, groupByUnit, needsZoom, panelsHeight };
+
+//# sourceMappingURL=UnitPanels.js.map

package/dist/component/organism/EChart/chart/UnitPanels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnitPanels.js","names":[],"sources":["../../../../../src/component/organism/EChart/chart/UnitPanels.ts"],"sourcesContent":["import type { EChartsOption } from 'echarts';\n\nimport { DEFAULT_LOCALE } from '../../../../i18n/KitLocale';\nimport { ChartSeries, ChartUnit } from './ChartSeries';\n\n/**\n * Splits the series of a chart into panels, one per unit, stacked vertically and sharing the same X axis of\n * categories (small multiples). So series with different units (e.g. $ and %) never share the same Y axis, and each\n * panel shows its unit in the name of the axis, without repeating the unit in the legend.\n * @author Manoel Campos\n */\n\n/** Series of the same unit, drawn in the same panel. */\nexport type Panel = {\n    unit: ChartUnit;\n    series: ChartSeries[];\n};\n\n/** Room at the top of the chart, for the title and one legend row (px). */\nexport const PANELS_TOP = 100;\n\n/** Height of each panel (px). */\nexport const PANEL_HEIGHT = 280;\n\n/** Space between a panel and the next one, where the category labels of the upper panel are (px). */\nexport const PANEL_GAP = 60;\n\n/** Room below the last panel, for the category labels (px). */\nexport const BOTTOM_MARGIN = 40;\n\n/** Extra height for the zoom bar of the X axis, when it is shown (px). */\nexport const ZOOM_HEIGHT = 50;\n\n/** Side margins of the panels (px). The left one is wider to fit the values of the Y axis. */\nconst LEFT_MARGIN = 80;\nconst RIGHT_MARGIN = 40;\n\n/** From how many categories the X axis gets a zoom bar, so the columns are not squeezed. */\nexport const MIN_CATEGORIES_FOR_ZOOM = 16;\n\n/** Compact number formatters already created, by locale. */\nconst compactFormatters = new Map<string, Intl.NumberFormat>();\n\n/**\n * Formats a number in a compact way (e.g. 1,250,000 → \"1.3M\" in `en-US`, \"1,3 mi\" in `pt-BR`), so the axes are not\n * cluttered. The full value stays in the tooltip.\n * @param value value to format\n * @param locale locale of the format; defaults to `en-US`\n * @return the value in the compact format of the locale\n */\nexport function formatCompactNumber(value: number, locale: string = DEFAULT_LOCALE): string {\n    let formatter = compactFormatters.get(locale);\n    if (!formatter) {\n        formatter = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 });\n        compactFormatters.set(locale, formatter);\n    }\n\n    return formatter.format(value);\n}\n\n/**\n * Groups the series by the label of the unit, in the order each unit first appears.\n * @param series series of the chart\n * @return a panel per unit\n */\nexport function groupByUnit(series: ChartSeries[]): Panel[] {\n    const panels = new Map<string, Panel>();\n    series.forEach(serie => {\n        const panel = panels.get(serie.unit.label) ?? { unit: serie.unit, series: [] };\n        panel.series.push(serie);\n        panels.set(serie.unit.label, panel);\n    });\n\n    return Array.from(panels.values());\n}\n\n/**\n * Checks whether the X axis needs a zoom bar, so many categories are not squeezed.\n * @param categoriesCount number of categories in the X axis\n * @return true if the X axis should have a zoom bar\n */\nexport function needsZoom(categoriesCount: number): boolean {\n    return categoriesCount >= MIN_CATEGORIES_FOR_ZOOM;\n}\n\n/**\n * Computes the total height of the chart, which grows with the number of panels.\n * @param panelsCount number of panels (different units)\n * @param categoriesCount number of categories in the X axis, which defines whether there is a zoom bar\n * @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)\n * @return the height of the chart (px)\n */\nexport function panelsHeight(panelsCount: number, categoriesCount: number, extraTop: number = 0): number {\n    const panels = panelsCount * PANEL_HEIGHT + Math.max(panelsCount - 1, 0) * PANEL_GAP;\n    const zoom = needsZoom(categoriesCount) ? ZOOM_HEIGHT : 0;\n    return PANELS_TOP + extraTop + panels + BOTTOM_MARGIN + zoom;\n}\n\n/**\n * Builds the grids and the axes of each panel. Panel `i` uses the grid, the X axis and the Y axis of index `i`.\n * The pointers of the X axes are linked, so hovering a category highlights it in all panels.\n * @param panels panels of the chart\n * @param categories categories of the X axis\n * @param extraTop extra room at the top, besides {@link PANELS_TOP}, for the extra rows of the legend (px)\n * @param locale locale of the number format of the Y axes; defaults to `en-US`\n * @return the parts of the ECharts `option` of the layout of the panels\n */\nexport function buildPanelAxes(\n    panels: Panel[],\n    categories: (string | number)[],\n    extraTop: number = 0,\n    locale: string = DEFAULT_LOCALE\n): Pick<EChartsOption, 'grid' | 'xAxis' | 'yAxis' | 'dataZoom' | 'axisPointer'> {\n    const indexes = panels.map((_, index) => index);\n    const categoryLabels = categories.map(String);\n\n    return {\n        grid: indexes.map(index => ({\n            top: PANELS_TOP + extraTop + index * (PANEL_HEIGHT + PANEL_GAP),\n            height: PANEL_HEIGHT,\n            left: LEFT_MARGIN,\n            right: RIGHT_MARGIN\n        })),\n        xAxis: indexes.map(index => ({ type: 'category', gridIndex: index, data: categoryLabels })),\n        yAxis: panels.map((panel, index) => ({\n            type: 'value',\n            gridIndex: index,\n            name: panel.unit.label,\n            axisLabel: { formatter: (value: number) => formatCompactNumber(value, locale) }\n        })),\n        dataZoom: needsZoom(categories.length) ? buildZoom(indexes) : [],\n        axisPointer: { link: [{ xAxisIndex: 'all' }] }\n    };\n}\n\n/**\n * Creates the zoom bar (and the zoom by the mouse wheel) applied to all X axes at once.\n * @param xAxisIndexes indexes of the X axes of the panels\n * @return the ECharts `dataZoom` configuration\n */\nfunction buildZoom(xAxisIndexes: number[]): EChartsOption['dataZoom'] {\n    return [\n        { type: 'slider', xAxisIndex: xAxisIndexes, bottom: BOTTOM_MARGIN / 4 },\n        { type: 'inside', xAxisIndex: xAxisIndexes }\n    ];\n}\n"],"mappings":";;;;AAmBA,IAAa,aAAa;;AAG1B,IAAa,eAAe;;AAG5B,IAAa,YAAY;;AAGzB,IAAa,gBAAgB;;AAG7B,IAAa,cAAc;;AAG3B,IAAM,cAAc;AACpB,IAAM,eAAe;;AAGrB,IAAa,0BAA0B;;AAGvC,IAAM,oCAAoB,IAAI,IAA+B;;;;;;;;AAS7D,SAAgB,oBAAoB,OAAe,SAAiB,gBAAwB;CACxF,IAAI,YAAY,kBAAkB,IAAI,MAAM;CAC5C,IAAI,CAAC,WAAW;EACZ,YAAY,IAAI,KAAK,aAAa,QAAQ;GAAE,UAAU;GAAW,uBAAuB;EAAE,CAAC;EAC3F,kBAAkB,IAAI,QAAQ,SAAS;CAC3C;CAEA,OAAO,UAAU,OAAO,KAAK;AACjC;;;;;;AAOA,SAAgB,YAAY,QAAgC;CACxD,MAAM,yBAAS,IAAI,IAAmB;CACtC,OAAO,SAAQ,UAAS;EACpB,MAAM,QAAQ,OAAO,IAAI,MAAM,KAAK,KAAK,KAAK;GAAE,MAAM,MAAM;GAAM,QAAQ,CAAC;EAAE;EAC7E,MAAM,OAAO,KAAK,KAAK;EACvB,OAAO,IAAI,MAAM,KAAK,OAAO,KAAK;CACtC,CAAC;CAED,OAAO,MAAM,KAAK,OAAO,OAAO,CAAC;AACrC;;;;;;AAOA,SAAgB,UAAU,iBAAkC;CACxD,OAAO,mBAAA;AACX;;;;;;;;AASA,SAAgB,aAAa,aAAqB,iBAAyB,WAAmB,GAAW;CACrG,MAAM,SAAS,cAAA,MAA6B,KAAK,IAAI,cAAc,GAAG,CAAC,IAAA;CACvE,MAAM,OAAO,UAAU,eAAe,IAAA,KAAkB;CACxD,OAAA,MAAoB,WAAW,SAAA,KAAyB;AAC5D;;;;;;;;;;AAWA,SAAgB,eACZ,QACA,YACA,WAAmB,GACnB,SAAiB,gBAC2D;CAC5E,MAAM,UAAU,OAAO,KAAK,GAAG,UAAU,KAAK;CAC9C,MAAM,iBAAiB,WAAW,IAAI,MAAM;CAE5C,OAAO;EACH,MAAM,QAAQ,KAAI,WAAU;GACxB,KAAA,MAAkB,WAAW,QAAS;GACtC,QAAA;GACA,MAAM;GACN,OAAO;EACX,EAAE;EACF,OAAO,QAAQ,KAAI,WAAU;GAAE,MAAM;GAAY,WAAW;GAAO,MAAM;EAAe,EAAE;EAC1F,OAAO,OAAO,KAAK,OAAO,WAAW;GACjC,MAAM;GACN,WAAW;GACX,MAAM,MAAM,KAAK;GACjB,WAAW,EAAE,YAAY,UAAkB,oBAAoB,OAAO,MAAM,EAAE;EAClF,EAAE;EACF,UAAU,UAAU,WAAW,MAAM,IAAI,UAAU,OAAO,IAAI,CAAC;EAC/D,aAAa,EAAE,MAAM,CAAC,EAAE,YAAY,MAAM,CAAC,EAAE;CACjD;AACJ;;;;;;AAOA,SAAS,UAAU,cAAmD;CAClE,OAAO,CACH;EAAE,MAAM;EAAU,YAAY;EAAc,QAAA;CAA0B,GACtE;EAAE,MAAM;EAAU,YAAY;CAAa,CAC/C;AACJ"}

package/dist/component/organism/EChart/echartDefaults.d.ts

@@ -0,0 +1,32 @@
+import { CSSProperties } from 'react';
+import type { EChartsOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from 'echarts';
+/** Shows the tooltip when hovering each element (map area, bar, slice etc.). */
+export declare const DEFAULT_TOOLTIP: TooltipComponentOption;
+/**
+ * Pixel density of the image saved by the "save as image" button.
+ * 3x gives a high resolution image, suited to printed reports.
+ */
+export declare const SAVE_IMAGE_PIXEL_RATIO = 3;
+/** Adds to the chart the button that saves it as a high resolution image. */
+export declare const DEFAULT_TOOLBOX: ToolboxComponentOption;
+/** Color of the lowest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */
+export declare const VISUAL_MAP_MIN_COLOR = "#e0f3f8";
+/** Color of the highest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */
+export declare const VISUAL_MAP_MAX_COLOR = "#08589e";
+/**
+ * Color scale (the ECharts `visualMap` component) that paints each element of the chart (map area, bar etc.)
+ * according to its value, in a gradient from {@link VISUAL_MAP_MIN_COLOR} (value 0) to {@link VISUAL_MAP_MAX_COLOR}
+ * (value 1). It also shows a legend bar with this gradient, labeled from "0%" to "100%", with handles the user can drag
+ * to highlight only the elements within a range of values (`calculable`).
+ *
+ * The 0..1 scale matches percentage values.
+ * Since the color comes from the value, and not from the palette of the series, it does not suit charts of absolute
+ * values (money, volumes): turn it off with the `withVisualMap` prop of the {@link EChart}.
+ */
+export declare const DEFAULT_VISUAL_MAP: VisualMapComponentOption;
+/** Default values of the `option` of any chart, except the {@link DEFAULT_VISUAL_MAP} (which is optional). */
+export declare const DEFAULT_OPTION: EChartsOption;
+/** Default height of the chart, in pixels. */
+export declare const DEFAULT_CHART_HEIGHT = 600;
+/** Style used when no `style` is given to the {@link EChart}: it takes the whole available width. */
+export declare const DEFAULT_STYLE: CSSProperties;

package/dist/component/organism/EChart/echartDefaults.js

@@ -0,0 +1,47 @@
+"use client";
+// src/component/organism/EChart/echartDefaults.ts
+/** Shows the tooltip when hovering each element (map area, bar, slice etc.). */
+var DEFAULT_TOOLTIP = { trigger: "item" };
+/**
+* Pixel density of the image saved by the "save as image" button.
+* 3x gives a high resolution image, suited to printed reports.
+*/
+var SAVE_IMAGE_PIXEL_RATIO = 3;
+/** Adds to the chart the button that saves it as a high resolution image. */
+var DEFAULT_TOOLBOX = { feature: { saveAsImage: { pixelRatio: 3 } } };
+/** Color of the lowest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */
+var VISUAL_MAP_MIN_COLOR = "#e0f3f8";
+/** Color of the highest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */
+var VISUAL_MAP_MAX_COLOR = "#08589e";
+/**
+* Color scale (the ECharts `visualMap` component) that paints each element of the chart (map area, bar etc.)
+* according to its value, in a gradient from {@link VISUAL_MAP_MIN_COLOR} (value 0) to {@link VISUAL_MAP_MAX_COLOR}
+* (value 1). It also shows a legend bar with this gradient, labeled from "0%" to "100%", with handles the user can drag
+* to highlight only the elements within a range of values (`calculable`).
+*
+* The 0..1 scale matches percentage values.
+* Since the color comes from the value, and not from the palette of the series, it does not suit charts of absolute
+* values (money, volumes): turn it off with the `withVisualMap` prop of the {@link EChart}.
+*/
+var DEFAULT_VISUAL_MAP = {
+	min: 0,
+	max: 1,
+	calculable: true,
+	text: ["100%", "0%"],
+	inRange: { color: [VISUAL_MAP_MIN_COLOR, VISUAL_MAP_MAX_COLOR] }
+};
+/** Default values of the `option` of any chart, except the {@link DEFAULT_VISUAL_MAP} (which is optional). */
+var DEFAULT_OPTION = {
+	tooltip: DEFAULT_TOOLTIP,
+	toolbox: DEFAULT_TOOLBOX
+};
+/** Default height of the chart, in pixels. */
+var DEFAULT_CHART_HEIGHT = 600;
+/** Style used when no `style` is given to the {@link EChart}: it takes the whole available width. */
+var DEFAULT_STYLE = {
+	width: "100%",
+	height: 600
+};
+export { DEFAULT_CHART_HEIGHT, DEFAULT_OPTION, DEFAULT_STYLE, DEFAULT_TOOLBOX, DEFAULT_TOOLTIP, DEFAULT_VISUAL_MAP, SAVE_IMAGE_PIXEL_RATIO, VISUAL_MAP_MAX_COLOR, VISUAL_MAP_MIN_COLOR };
+
+//# sourceMappingURL=echartDefaults.js.map

package/dist/component/organism/EChart/echartDefaults.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"echartDefaults.js","names":[],"sources":["../../../../src/component/organism/EChart/echartDefaults.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport type { EChartsOption, ToolboxComponentOption, TooltipComponentOption, VisualMapComponentOption } from 'echarts';\n\n/** Shows the tooltip when hovering each element (map area, bar, slice etc.). */\nexport const DEFAULT_TOOLTIP: TooltipComponentOption = { trigger: 'item' };\n\n/**\n * Pixel density of the image saved by the \"save as image\" button.\n * 3x gives a high resolution image, suited to printed reports.\n */\nexport const SAVE_IMAGE_PIXEL_RATIO = 3;\n\n/** Adds to the chart the button that saves it as a high resolution image. */\nexport const DEFAULT_TOOLBOX: ToolboxComponentOption = {\n    feature: { saveAsImage: { pixelRatio: SAVE_IMAGE_PIXEL_RATIO } }\n};\n\n/** Color of the lowest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */\nexport const VISUAL_MAP_MIN_COLOR = '#e0f3f8';\n\n/** Color of the highest values of the scale of the {@link DEFAULT_VISUAL_MAP}. */\nexport const VISUAL_MAP_MAX_COLOR = '#08589e';\n\n/**\n * Color scale (the ECharts `visualMap` component) that paints each element of the chart (map area, bar etc.)\n * according to its value, in a gradient from {@link VISUAL_MAP_MIN_COLOR} (value 0) to {@link VISUAL_MAP_MAX_COLOR}\n * (value 1). It also shows a legend bar with this gradient, labeled from \"0%\" to \"100%\", with handles the user can drag\n * to highlight only the elements within a range of values (`calculable`).\n *\n * The 0..1 scale matches percentage values.\n * Since the color comes from the value, and not from the palette of the series, it does not suit charts of absolute\n * values (money, volumes): turn it off with the `withVisualMap` prop of the {@link EChart}.\n */\nexport const DEFAULT_VISUAL_MAP: VisualMapComponentOption = {\n    min: 0,\n    max: 1,\n    calculable: true,\n    text: ['100%', '0%'],\n    inRange: { color: [VISUAL_MAP_MIN_COLOR, VISUAL_MAP_MAX_COLOR] }\n};\n\n/** Default values of the `option` of any chart, except the {@link DEFAULT_VISUAL_MAP} (which is optional). */\nexport const DEFAULT_OPTION: EChartsOption = {\n    tooltip: DEFAULT_TOOLTIP,\n    toolbox: DEFAULT_TOOLBOX\n};\n\n/** Default height of the chart, in pixels. */\nexport const DEFAULT_CHART_HEIGHT = 600;\n\n/** Style used when no `style` is given to the {@link EChart}: it takes the whole available width. */\nexport const DEFAULT_STYLE: CSSProperties = { width: '100%', height: DEFAULT_CHART_HEIGHT };\n"],"mappings":";;;AAKA,IAAa,kBAA0C,EAAE,SAAS,OAAO;;;;;AAMzE,IAAa,yBAAyB;;AAGtC,IAAa,kBAA0C,EACnD,SAAS,EAAE,aAAa,EAAE,YAAA,EAAmC,EAAE,EACnE;;AAGA,IAAa,uBAAuB;;AAGpC,IAAa,uBAAuB;;;;;;;;;;;AAYpC,IAAa,qBAA+C;CACxD,KAAK;CACL,KAAK;CACL,YAAY;CACZ,MAAM,CAAC,QAAQ,IAAI;CACnB,SAAS,EAAE,OAAO,CAAC,sBAAsB,oBAAoB,EAAE;AACnE;;AAGA,IAAa,iBAAgC;CACzC,SAAS;CACT,SAAS;AACb;;AAGA,IAAa,uBAAuB;;AAGpC,IAAa,gBAA+B;CAAE,OAAO;CAAQ,QAAA;AAA6B"}

package/dist/component/organism/EChart/useEChart.d.ts

@@ -0,0 +1,35 @@
+import { RefObject } from 'react';
+import type { EChartsOption } from 'echarts';
+/** Data ECharts gives to whoever handles an event (e.g. the name of the clicked series). */
+export type EChartEventParams = {
+    /** Name of the element (e.g. legend item or slice) related to the event. */
+    name?: string;
+    /** Name of the series related to the event, in click events on an element of the chart. */
+    seriesName?: string;
+    [attribute: string]: unknown;
+};
+/** Functions that handle ECharts events, indexed by the event name (e.g. `click`, `legendselectchanged`). */
+export type EChartEventHandlers = Record<string, (params: EChartEventParams) => void>;
+/** Geometry of a map (e.g. a GeoJSON with the areas of the cities), in the format accepted by `echarts.registerMap`. */
+export type EChartMapSource = Parameters<typeof import('echarts').registerMap>[1];
+/** Maps used by the chart, indexed by the name the `map` series (or the `geo` component) use in the `map` attribute. */
+export type EChartMaps = Record<string, EChartMapSource>;
+/**
+ * How ECharts draws the chart: in `canvas` (default, faster on screen) or in `svg`, which is printed as sharp vector
+ * graphics or saved as PDF. Use `svg` in reports.
+ */
+export type EChartRenderer = 'canvas' | 'svg';
+/**
+ * Manages the life cycle of an ECharts instance bound to a DOM element: creates the instance on mount, applies the
+ * `option` whenever it changes, resizes the chart when the container changes its size and disposes the instance on
+ * unmount.
+ *
+ * ECharts is loaded on demand (dynamic `import()`), so only the pages that show charts download the library.
+ * @param option final option shown in the chart
+ * @param onEvents functions that handle the chart events; they are replaced when the object changes
+ * @param maps maps registered in ECharts before creating the chart; when they change, they are registered again and
+ *        the chart is redrawn
+ * @param renderer how the chart is drawn; read only when the chart is created
+ * @return ref to assign to the element that will hold the chart
+ */
+export declare function useEChart(option: EChartsOption, onEvents?: EChartEventHandlers, maps?: EChartMaps, renderer?: EChartRenderer): RefObject<HTMLDivElement | null>;

package/dist/component/organism/EChart/useEChart.js

@@ -0,0 +1,112 @@
+"use client";
+import { useEffect, useRef } from "react";
+// src/component/organism/EChart/useEChart.ts
+/** notMerge: replaces the previous option, so attributes removed from the props disappear from the chart. */
+var SET_OPTION_OPTS = { notMerge: true };
+/**
+* Print media query. It changes when the browser applies (or removes) the paper layout, whose width differs from the
+* screen. It is more reliable than `beforeprint`, which fires before this layout and would measure the screen.
+*/
+var PRINT_MEDIA_QUERY = "print";
+/**
+* Manages the life cycle of an ECharts instance bound to a DOM element: creates the instance on mount, applies the
+* `option` whenever it changes, resizes the chart when the container changes its size and disposes the instance on
+* unmount.
+*
+* ECharts is loaded on demand (dynamic `import()`), so only the pages that show charts download the library.
+* @param option final option shown in the chart
+* @param onEvents functions that handle the chart events; they are replaced when the object changes
+* @param maps maps registered in ECharts before creating the chart; when they change, they are registered again and
+*        the chart is redrawn
+* @param renderer how the chart is drawn; read only when the chart is created
+* @return ref to assign to the element that will hold the chart
+*/
+function useEChart(option, onEvents, maps, renderer = "canvas") {
+	const containerRef = useRef(null);
+	const chartRef = useRef(null);
+	const optionRef = useRef(option);
+	const onEventsRef = useRef(onEvents);
+	const boundEventsRef = useRef(void 0);
+	const mapsRef = useRef(maps);
+	const echartsRef = useRef(null);
+	useEffect(() => {
+		mapsRef.current = maps;
+		if (!echartsRef.current || !chartRef.current) return;
+		registerMaps(echartsRef.current, maps);
+		chartRef.current.setOption(optionRef.current, SET_OPTION_OPTS);
+	}, [maps]);
+	useEffect(() => {
+		optionRef.current = option;
+		chartRef.current?.setOption(option, SET_OPTION_OPTS);
+	}, [option]);
+	useEffect(() => {
+		onEventsRef.current = onEvents;
+		if (chartRef.current) replaceEvents(chartRef.current, boundEventsRef, onEvents);
+	}, [onEvents]);
+	const rendererRef = useRef(renderer);
+	useEffect(() => {
+		let unmounted = false;
+		let resizeObserver = null;
+		const resize = () => chartRef.current?.resize();
+		const printMedia = window.matchMedia(PRINT_MEDIA_QUERY);
+		printMedia.addEventListener("change", resize);
+		import("echarts").then((echarts) => {
+			const container = containerRef.current;
+			if (unmounted || !container) return;
+			echartsRef.current = echarts;
+			registerMaps(echarts, mapsRef.current);
+			const chart = echarts.init(container, void 0, { renderer: rendererRef.current });
+			chart.setOption(optionRef.current, SET_OPTION_OPTS);
+			replaceEvents(chart, boundEventsRef, onEventsRef.current);
+			chartRef.current = chart;
+			resizeObserver = new ResizeObserver(() => chart.resize());
+			resizeObserver.observe(container);
+		});
+		return () => {
+			unmounted = true;
+			printMedia.removeEventListener("change", resize);
+			resizeObserver?.disconnect();
+			chartRef.current?.dispose();
+			chartRef.current = null;
+		};
+	}, []);
+	return containerRef;
+}
+/**
+* Registers the maps in ECharts, so the series can use them by name.
+* @param echarts ECharts module
+* @param maps maps indexed by name; `undefined` registers nothing
+*/
+function registerMaps(echarts, maps) {
+	Object.entries(maps ?? {}).forEach(([name, map]) => echarts.registerMap(name, map));
+}
+/**
+* Unbinds from the chart the handlers bound before and binds the new ones.
+* @param chart chart instance
+* @param boundEventsRef ref with the handlers currently bound; it is updated with the new ones
+* @param newHandlers handlers to bind; `undefined` just unbinds the previous ones
+*/
+function replaceEvents(chart, boundEventsRef, newHandlers) {
+	if (boundEventsRef.current) unbindEvents(chart, boundEventsRef.current);
+	if (newHandlers) bindEvents(chart, newHandlers);
+	boundEventsRef.current = newHandlers;
+}
+/**
+* Binds each handler to its event in the chart.
+* @param chart chart instance
+* @param onEvents handlers indexed by the event name
+*/
+function bindEvents(chart, onEvents) {
+	Object.entries(onEvents).forEach(([event, handler]) => chart.on(event, handler));
+}
+/**
+* Unbinds from the chart the handlers bound by {@link bindEvents}.
+* @param chart chart instance
+* @param onEvents handlers indexed by the event name
+*/
+function unbindEvents(chart, onEvents) {
+	Object.entries(onEvents).forEach(([event, handler]) => chart.off(event, handler));
+}
+export { useEChart };
+
+//# sourceMappingURL=useEChart.js.map

package/dist/component/organism/EChart/useEChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEChart.js","names":[],"sources":["../../../../src/component/organism/EChart/useEChart.ts"],"sourcesContent":["import { RefObject, useEffect, useRef } from 'react';\n\nimport type { EChartsOption, EChartsType, SetOptionOpts } from 'echarts';\n\n/** notMerge: replaces the previous option, so attributes removed from the props disappear from the chart. */\nconst SET_OPTION_OPTS: SetOptionOpts = { notMerge: true };\n\n/** Data ECharts gives to whoever handles an event (e.g. the name of the clicked series). */\nexport type EChartEventParams = {\n    /** Name of the element (e.g. legend item or slice) related to the event. */\n    name?: string;\n\n    /** Name of the series related to the event, in click events on an element of the chart. */\n    seriesName?: string;\n\n    [attribute: string]: unknown;\n};\n\n/** Functions that handle ECharts events, indexed by the event name (e.g. `click`, `legendselectchanged`). */\nexport type EChartEventHandlers = Record<string, (params: EChartEventParams) => void>;\n\n/** Generic handler signature accepted by `chart.on`/`chart.off`, which does not type the parameters of each event. */\ntype EChartsHandler = (...args: unknown[]) => void;\n\n/** ECharts module, loaded on demand. */\ntype EChartsModule = typeof import('echarts');\n\n/** Geometry of a map (e.g. a GeoJSON with the areas of the cities), in the format accepted by `echarts.registerMap`. */\nexport type EChartMapSource = Parameters<typeof import('echarts').registerMap>[1];\n\n/** Maps used by the chart, indexed by the name the `map` series (or the `geo` component) use in the `map` attribute. */\nexport type EChartMaps = Record<string, EChartMapSource>;\n\n/**\n * How ECharts draws the chart: in `canvas` (default, faster on screen) or in `svg`, which is printed as sharp vector\n * graphics or saved as PDF. Use `svg` in reports.\n */\nexport type EChartRenderer = 'canvas' | 'svg';\n\n/**\n * Print media query. It changes when the browser applies (or removes) the paper layout, whose width differs from the\n * screen. It is more reliable than `beforeprint`, which fires before this layout and would measure the screen.\n */\nconst PRINT_MEDIA_QUERY = 'print';\n\n/**\n * Manages the life cycle of an ECharts instance bound to a DOM element: creates the instance on mount, applies the\n * `option` whenever it changes, resizes the chart when the container changes its size and disposes the instance on\n * unmount.\n *\n * ECharts is loaded on demand (dynamic `import()`), so only the pages that show charts download the library.\n * @param option final option shown in the chart\n * @param onEvents functions that handle the chart events; they are replaced when the object changes\n * @param maps maps registered in ECharts before creating the chart; when they change, they are registered again and\n *        the chart is redrawn\n * @param renderer how the chart is drawn; read only when the chart is created\n * @return ref to assign to the element that will hold the chart\n */\nexport function useEChart(\n    option: EChartsOption,\n    onEvents?: EChartEventHandlers,\n    maps?: EChartMaps,\n    renderer: EChartRenderer = 'canvas'\n): RefObject<HTMLDivElement | null> {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const chartRef = useRef<EChartsType | null>(null);\n\n    // Keeps the latest option, to apply it when ECharts finishes loading.\n    const optionRef = useRef(option);\n\n    // Keeps the latest handlers, to bind them when ECharts finishes loading.\n    const onEventsRef = useRef(onEvents);\n\n    // Handlers currently bound to the chart, so they are unbound before binding the new ones.\n    const boundEventsRef = useRef<EChartEventHandlers | undefined>(undefined);\n\n    // Keeps the latest maps, to register them when ECharts finishes loading.\n    const mapsRef = useRef(maps);\n\n    // ECharts module, kept after loading to register the maps that change.\n    const echartsRef = useRef<EChartsModule | null>(null);\n\n    /* Registers the new maps and redraws the chart already created, which still uses the previous geometry. Before\n       ECharts loads, just keeps the maps. It comes before the option effect so that, if both change together, the new\n       option already finds the new map. */\n    useEffect(() => {\n        mapsRef.current = maps;\n        if (!echartsRef.current || !chartRef.current) return;\n\n        registerMaps(echartsRef.current, maps);\n        chartRef.current.setOption(optionRef.current, SET_OPTION_OPTS);\n    }, [maps]);\n\n    // Applies the new option to the chart already created. Before ECharts loads, just keeps the option for the other effect.\n    useEffect(() => {\n        optionRef.current = option;\n        chartRef.current?.setOption(option, SET_OPTION_OPTS);\n    }, [option]);\n\n    // Replaces the event handlers of the chart already created. Before ECharts loads, just keeps the handlers.\n    useEffect(() => {\n        onEventsRef.current = onEvents;\n        if (chartRef.current) replaceEvents(chartRef.current, boundEventsRef, onEvents);\n    }, [onEvents]);\n\n    // Keeps the renderer of the chart creation: changing it would require recreating the chart, which the hook does not do.\n    const rendererRef = useRef(renderer);\n\n    /* Runs only on mount: loads ECharts, registers the maps, creates the chart in the container with the latest option\n       and resizes it when the container changes its size or the page is about to be printed. The maps are registered\n       before the first `setOption`, otherwise ECharts does not find the map used by the series. */\n    useEffect(() => {\n        let unmounted = false;\n        let resizeObserver: ResizeObserver | null = null;\n        const resize = (): void => chartRef.current?.resize();\n        const printMedia = window.matchMedia(PRINT_MEDIA_QUERY);\n        printMedia.addEventListener('change', resize);\n\n        import('echarts').then(echarts => {\n            const container = containerRef.current;\n            if (unmounted || !container) return;\n\n            echartsRef.current = echarts;\n            registerMaps(echarts, mapsRef.current);\n            const chart = echarts.init(container, undefined, { renderer: rendererRef.current });\n            chart.setOption(optionRef.current, SET_OPTION_OPTS);\n            replaceEvents(chart, boundEventsRef, onEventsRef.current);\n            chartRef.current = chart;\n\n            resizeObserver = new ResizeObserver(() => chart.resize());\n            resizeObserver.observe(container);\n        });\n\n        /* Cleanup, which React calls on unmount: releases the observer and the chart instance. The `unmounted` flag\n           prevents the chart from being created if ECharts finishes loading after the component left the screen. */\n        return (): void => {\n            unmounted = true;\n            printMedia.removeEventListener('change', resize);\n            resizeObserver?.disconnect();\n            chartRef.current?.dispose();\n            chartRef.current = null;\n        };\n    }, []);\n\n    return containerRef;\n}\n\n/**\n * Registers the maps in ECharts, so the series can use them by name.\n * @param echarts ECharts module\n * @param maps maps indexed by name; `undefined` registers nothing\n */\nfunction registerMaps(echarts: EChartsModule, maps?: EChartMaps): void {\n    Object.entries(maps ?? {}).forEach(([name, map]) => echarts.registerMap(name, map));\n}\n\n/**\n * Unbinds from the chart the handlers bound before and binds the new ones.\n * @param chart chart instance\n * @param boundEventsRef ref with the handlers currently bound; it is updated with the new ones\n * @param newHandlers handlers to bind; `undefined` just unbinds the previous ones\n */\nfunction replaceEvents(\n    chart: EChartsType,\n    boundEventsRef: RefObject<EChartEventHandlers | undefined>,\n    newHandlers?: EChartEventHandlers\n): void {\n    if (boundEventsRef.current) unbindEvents(chart, boundEventsRef.current);\n    if (newHandlers) bindEvents(chart, newHandlers);\n    boundEventsRef.current = newHandlers;\n}\n\n/**\n * Binds each handler to its event in the chart.\n * @param chart chart instance\n * @param onEvents handlers indexed by the event name\n */\nfunction bindEvents(chart: EChartsType, onEvents: EChartEventHandlers): void {\n    Object.entries(onEvents).forEach(([event, handler]) => chart.on(event, handler as EChartsHandler));\n}\n\n/**\n * Unbinds from the chart the handlers bound by {@link bindEvents}.\n * @param chart chart instance\n * @param onEvents handlers indexed by the event name\n */\nfunction unbindEvents(chart: EChartsType, onEvents: EChartEventHandlers): void {\n    Object.entries(onEvents).forEach(([event, handler]) => chart.off(event, handler as EChartsHandler));\n}\n"],"mappings":";;;;AAKA,IAAM,kBAAiC,EAAE,UAAU,KAAK;;;;;AAsCxD,IAAM,oBAAoB;;;;;;;;;;;;;;AAe1B,SAAgB,UACZ,QACA,UACA,MACA,WAA2B,UACK;CAChC,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,WAAW,OAA2B,IAAI;CAGhD,MAAM,YAAY,OAAO,MAAM;CAG/B,MAAM,cAAc,OAAO,QAAQ;CAGnC,MAAM,iBAAiB,OAAwC,KAAA,CAAS;CAGxE,MAAM,UAAU,OAAO,IAAI;CAG3B,MAAM,aAAa,OAA6B,IAAI;CAKpD,gBAAgB;EACZ,QAAQ,UAAU;EAClB,IAAI,CAAC,WAAW,WAAW,CAAC,SAAS,SAAS;EAE9C,aAAa,WAAW,SAAS,IAAI;EACrC,SAAS,QAAQ,UAAU,UAAU,SAAS,eAAe;CACjE,GAAG,CAAC,IAAI,CAAC;CAGT,gBAAgB;EACZ,UAAU,UAAU;EACpB,SAAS,SAAS,UAAU,QAAQ,eAAe;CACvD,GAAG,CAAC,MAAM,CAAC;CAGX,gBAAgB;EACZ,YAAY,UAAU;EACtB,IAAI,SAAS,SAAS,cAAc,SAAS,SAAS,gBAAgB,QAAQ;CAClF,GAAG,CAAC,QAAQ,CAAC;CAGb,MAAM,cAAc,OAAO,QAAQ;CAKnC,gBAAgB;EACZ,IAAI,YAAY;EAChB,IAAI,iBAAwC;EAC5C,MAAM,eAAqB,SAAS,SAAS,OAAO;EACpD,MAAM,aAAa,OAAO,WAAW,iBAAiB;EACtD,WAAW,iBAAiB,UAAU,MAAM;EAE5C,OAAO,UAAU,CAAC,MAAK,YAAW;GAC9B,MAAM,YAAY,aAAa;GAC/B,IAAI,aAAa,CAAC,WAAW;GAE7B,WAAW,UAAU;GACrB,aAAa,SAAS,QAAQ,OAAO;GACrC,MAAM,QAAQ,QAAQ,KAAK,WAAW,KAAA,GAAW,EAAE,UAAU,YAAY,QAAQ,CAAC;GAClF,MAAM,UAAU,UAAU,SAAS,eAAe;GAClD,cAAc,OAAO,gBAAgB,YAAY,OAAO;GACxD,SAAS,UAAU;GAEnB,iBAAiB,IAAI,qBAAqB,MAAM,OAAO,CAAC;GACxD,eAAe,QAAQ,SAAS;EACpC,CAAC;EAID,aAAmB;GACf,YAAY;GACZ,WAAW,oBAAoB,UAAU,MAAM;GAC/C,gBAAgB,WAAW;GAC3B,SAAS,SAAS,QAAQ;GAC1B,SAAS,UAAU;EACvB;CACJ,GAAG,CAAC,CAAC;CAEL,OAAO;AACX;;;;;;AAOA,SAAS,aAAa,SAAwB,MAAyB;CACnE,OAAO,QAAQ,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,MAAM,SAAS,QAAQ,YAAY,MAAM,GAAG,CAAC;AACtF;;;;;;;AAQA,SAAS,cACL,OACA,gBACA,aACI;CACJ,IAAI,eAAe,SAAS,aAAa,OAAO,eAAe,OAAO;CACtE,IAAI,aAAa,WAAW,OAAO,WAAW;CAC9C,eAAe,UAAU;AAC7B;;;;;;AAOA,SAAS,WAAW,OAAoB,UAAqC;CACzE,OAAO,QAAQ,QAAQ,CAAC,CAAC,SAAS,CAAC,OAAO,aAAa,MAAM,GAAG,OAAO,OAAyB,CAAC;AACrG;;;;;;AAOA,SAAS,aAAa,OAAoB,UAAqC;CAC3E,OAAO,QAAQ,QAAQ,CAAC,CAAC,SAAS,CAAC,OAAO,aAAa,MAAM,IAAI,OAAO,OAAyB,CAAC;AACtG"}

package/dist/component/organism/Navbar/NavItem.d.ts

@@ -0,0 +1,16 @@
+import { ComponentType } from 'react';
+/**
+ * Item of the side menu ({@link Navbar}). An item with `children` is a collapsible group, which does not navigate: only
+ * its children have a `link`.
+ */
+export interface NavItem {
+    /** Path of the page opened by the item; absent in the groups. */
+    link?: string;
+    label: string;
+    /** Icon of the item (e.g. an icon of `@tabler/icons-react`). */
+    icon: ComponentType<{
+        stroke?: number;
+    }>;
+    /** Items of the group, shown below it when the group is open. */
+    children?: NavItem[];
+}

package/dist/component/organism/Navbar/NavItem.js

@@ -0,0 +1 @@
+"use client";

package/dist/component/organism/Navbar/Navbar.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode } from 'react';
+import { NavItem } from './NavItem';
+type NavbarProps = {
+    /** Items of the menu, in the display order. */
+    items: NavItem[];
+    /** Content fixed at the bottom of the menu (e.g. a link to log out). */
+    footer?: ReactNode;
+    /** Called when a link is clicked (e.g. to close the menu on mobile devices). */
+    linkClickHandler?: () => void;
+};
+/**
+ * Tells whether the item, or an item inside it (for a group), opens the current page.
+ * @param item item of the menu
+ * @param pathname path of the current page
+ * @return `true` if the item holds the current page
+ */
+export declare function containsCurrentPage(item: NavItem, pathname: string): boolean;
+/** Side menu of the {@link Layout}: links to the pages and collapsible groups, with the current page highlighted. */
+export declare function Navbar({ items, footer, linkClickHandler }: NavbarProps): ReactElement;
+export default Navbar;

package/dist/component/organism/Navbar/Navbar.js

@@ -0,0 +1,64 @@
+"use client";
+import { useKitRouter } from "../../../provider/useKit.js";
+import Navbar_module_default from "./Navbar.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AppShell, NavLink } from "@mantine/core";
+// src/component/organism/Navbar/Navbar.tsx
+/**
+* Tells whether the item, or an item inside it (for a group), opens the current page.
+* @param item item of the menu
+* @param pathname path of the current page
+* @return `true` if the item holds the current page
+*/
+function containsCurrentPage(item, pathname) {
+	return item.link === pathname || (item.children ?? []).some((child) => containsCurrentPage(child, pathname));
+}
+/**
+* Item of the side menu: a link to a page or, if it has `children`, a collapsible group with its items. The group
+* starts open when it holds the current page, and the item of the current page is highlighted.
+*/
+function MenuItem({ item, linkClickHandler }) {
+	const { Link, usePathname } = useKitRouter();
+	const pathname = usePathname();
+	const icon = /* @__PURE__ */ jsx(item.icon, { stroke: 1.5 });
+	if (item.children) return /* @__PURE__ */ jsx(NavLink, {
+		component: "button",
+		label: item.label,
+		leftSection: icon,
+		defaultOpened: containsCurrentPage(item, pathname),
+		className: Navbar_module_default.link,
+		children: item.children.map((child) => /* @__PURE__ */ jsx(MenuItem, {
+			item: child,
+			linkClickHandler
+		}, child.label))
+	});
+	return /* @__PURE__ */ jsx(NavLink, {
+		component: Link,
+		href: item.link ?? "#",
+		active: item.link === pathname,
+		label: item.label,
+		leftSection: icon,
+		className: Navbar_module_default.link,
+		onClick: linkClickHandler
+	});
+}
+/** Side menu of the {@link Layout}: links to the pages and collapsible groups, with the current page highlighted. */
+function Navbar({ items, footer, linkClickHandler }) {
+	return /* @__PURE__ */ jsxs(AppShell.Navbar, {
+		p: "md",
+		className: Navbar_module_default.navbar,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: Navbar_module_default.navbarMain,
+			children: items.map((item) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(MenuItem, {
+				item,
+				linkClickHandler
+			}) }, item.label))
+		}), footer && /* @__PURE__ */ jsx("div", {
+			className: Navbar_module_default.footer,
+			children: footer
+		})]
+	});
+}
+export { Navbar, Navbar as default, containsCurrentPage };
+
+//# sourceMappingURL=Navbar.js.map

package/dist/component/organism/Navbar/Navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.js","names":["classes"],"sources":["../../../../src/component/organism/Navbar/Navbar.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport { AppShell, NavLink } from '@mantine/core';\n\nimport { useKitRouter } from '../../../provider/useKit';\nimport classes from './Navbar.module.css';\nimport { NavItem } from './NavItem';\n\ntype NavbarProps = {\n    /** Items of the menu, in the display order. */\n    items: NavItem[];\n\n    /** Content fixed at the bottom of the menu (e.g. a link to log out). */\n    footer?: ReactNode;\n\n    /** Called when a link is clicked (e.g. to close the menu on mobile devices). */\n    linkClickHandler?: () => void;\n};\n\ntype MenuItemProps = {\n    item: NavItem;\n\n    /** Called when a link is clicked. */\n    linkClickHandler?: () => void;\n};\n\n/**\n * Tells whether the item, or an item inside it (for a group), opens the current page.\n * @param item item of the menu\n * @param pathname path of the current page\n * @return `true` if the item holds the current page\n */\nexport function containsCurrentPage(item: NavItem, pathname: string): boolean {\n    return item.link === pathname || (item.children ?? []).some(child => containsCurrentPage(child, pathname));\n}\n\n/**\n * Item of the side menu: a link to a page or, if it has `children`, a collapsible group with its items. The group\n * starts open when it holds the current page, and the item of the current page is highlighted.\n */\nfunction MenuItem({ item, linkClickHandler }: MenuItemProps): ReactElement {\n    const { Link, usePathname } = useKitRouter();\n    const pathname = usePathname();\n    const icon = <item.icon stroke={1.5} />;\n    if (item.children) {\n        return (\n            // A button, and not a link without destination, so the group can be opened with the keyboard.\n            <NavLink\n                component=\"button\"\n                label={item.label}\n                leftSection={icon}\n                defaultOpened={containsCurrentPage(item, pathname)}\n                className={classes.link}\n            >\n                {item.children.map(child => (\n                    <MenuItem key={child.label} item={child} linkClickHandler={linkClickHandler} />\n                ))}\n            </NavLink>\n        );\n    }\n\n    return (\n        <NavLink\n            component={Link}\n            href={item.link ?? '#'}\n            active={item.link === pathname}\n            label={item.label}\n            leftSection={icon}\n            className={classes.link}\n            onClick={linkClickHandler}\n        />\n    );\n}\n\n/** Side menu of the {@link Layout}: links to the pages and collapsible groups, with the current page highlighted. */\nexport function Navbar({ items, footer, linkClickHandler }: NavbarProps): ReactElement {\n    return (\n        <AppShell.Navbar p=\"md\" className={classes.navbar}>\n            <div className={classes.navbarMain}>\n                {items.map(item => (\n                    <div key={item.label}>\n                        <MenuItem item={item} linkClickHandler={linkClickHandler} />\n                    </div>\n                ))}\n            </div>\n\n            {footer && <div className={classes.footer}>{footer}</div>}\n        </AppShell.Navbar>\n    );\n}\n\nexport default Navbar;\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAgB,oBAAoB,MAAe,UAA2B;CAC1E,OAAO,KAAK,SAAS,aAAa,KAAK,YAAY,CAAC,EAAA,CAAG,MAAK,UAAS,oBAAoB,OAAO,QAAQ,CAAC;AAC7G;;;;;AAMA,SAAS,SAAS,EAAE,MAAM,oBAAiD;CACvE,MAAM,EAAE,MAAM,gBAAgB,aAAa;CAC3C,MAAM,WAAW,YAAY;CAC7B,MAAM,OAAO,oBAAC,KAAK,MAAN,EAAW,QAAQ,IAAM,CAAA;CACtC,IAAI,KAAK,UACL,OAEI,oBAAC,SAAD;EACI,WAAU;EACV,OAAO,KAAK;EACZ,aAAa;EACb,eAAe,oBAAoB,MAAM,QAAQ;EACjD,WAAWA,sBAAQ;EAElB,UAAA,KAAK,SAAS,KAAI,UACf,oBAAC,UAAD;GAA4B,MAAM;GAAyB;EAAmB,GAA/D,MAAM,KAAyD,CACjF;CACI,CAAA;CAIjB,OACI,oBAAC,SAAD;EACI,WAAW;EACX,MAAM,KAAK,QAAQ;EACnB,QAAQ,KAAK,SAAS;EACtB,OAAO,KAAK;EACZ,aAAa;EACb,WAAWA,sBAAQ;EACnB,SAAS;CACZ,CAAA;AAET;;AAGA,SAAgB,OAAO,EAAE,OAAO,QAAQ,oBAA+C;CACnF,OACI,qBAAC,SAAS,QAAV;EAAiB,GAAE;EAAK,WAAWA,sBAAQ;EAA3C,UAAA,CACI,oBAAC,OAAD;GAAK,WAAWA,sBAAQ;GACnB,UAAA,MAAM,KAAI,SACP,oBAAC,OAAD,EAAA,UACI,oBAAC,UAAD;IAAgB;IAAwB;GAAmB,CAAA,EAC1D,GAFK,KAAK,KAEV,CACR;EACA,CAAA,GAEJ,UAAU,oBAAC,OAAD;GAAK,WAAWA,sBAAQ;GAAS,UAAA;EAAY,CAAA,CAC3C;;AAEzB"}

package/dist/component/organism/Navbar/Navbar.module.js

@@ -0,0 +1,19 @@
+"use client";
+// src/component/organism/Navbar/Navbar.module.css
+var navbar = "mk-Navbar-module-navbar-0W9zF";
+var navbarMain = "mk-Navbar-module-navbarMain-QxMWi";
+var header = "mk-Navbar-module-header-q16r1";
+var footer = "mk-Navbar-module-footer-48Z0e";
+var link = "mk-Navbar-module-link-eQT-Z";
+var linkIcon = "mk-Navbar-module-linkIcon-5b3By";
+var Navbar_module_default = {
+	navbar,
+	navbarMain,
+	header,
+	footer,
+	link,
+	linkIcon
+};
+export { Navbar_module_default as default, footer, header, link, linkIcon, navbar, navbarMain };
+
+//# sourceMappingURL=Navbar.module.js.map

package/dist/component/organism/Navbar/Navbar.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navbar.module.js","names":[],"sources":["../../../../src/component/organism/Navbar/Navbar.module.css"],"sourcesContent":[".navbar {\n    padding: var(--mantine-spacing-md);\n    display: flex;\n    flex-direction: column;\n    border-right: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n}\n\n.navbarMain {\n    flex: 1;\n}\n\n.header {\n    padding-bottom: var(--mantine-spacing-md);\n    margin-bottom: calc(var(--mantine-spacing-md) * 1.5);\n    border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n}\n\n.footer {\n    padding-top: var(--mantine-spacing-md);\n    margin-top: var(--mantine-spacing-md);\n    border-top: rem(1px) solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4));\n}\n\n.link {\n    border-radius: var(--mantine-radius-md);\n    font-weight: 500;\n}\n\n.linkIcon {\n    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));\n    margin-right: var(--mantine-spacing-sm);\n    width: rem(25px);\n    height: rem(25px);\n}\n"],"mappings":""}

package/dist/component/organism/PageHeader/PageHeader.d.ts

@@ -0,0 +1,14 @@
+import { PaperProps } from '@mantine/core';
+import { BreadcrumbItem } from '../../molecule/Breadcrumb/Breadcrumb';
+type PageHeaderProps = {
+    title: string;
+    breadcrumbItems?: BreadcrumbItem[];
+    /** Route of the "Add" button. Without it, the page has no "Add" button. */
+    addActionRoute?: string;
+} & PaperProps;
+/**
+ * Header of a page: the title, the breadcrumb and, in list pages, the "Add" button. With the button, the breadcrumb
+ * starts at the home page.
+ */
+declare const PageHeader: (props: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export default PageHeader;