h2o-library 1.5.0 → 1.5.2

package/dist/components/index.d.ts

@@ -35,3 +35,4 @@ export * from "./src/chart-pie";
 export * from "./src/chart-stat";
 export * from "./src/date-range-picker";
 export * from "./src/legend";
+export * from "./src/chart";

package/dist/components/src/chart-heatmap.d.ts

@@ -11,5 +11,8 @@ export interface HeatmapData {
 export interface HeatmapChartProps {
     data: HeatmapData;
     showPercentage?: boolean;
+    height?: string | number;
+    showValue?: boolean;
+    showPercentageInTooltip?: boolean;
 }
-export declare const HeatmapChart: ({ data, showPercentage, }: HeatmapChartProps) => React.JSX.Element;
+export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, }: HeatmapChartProps) => React.JSX.Element;

package/dist/components/src/chart-line.d.ts

@@ -8,6 +8,7 @@ export interface LineProps {
     stroke: string;
     dashed?: boolean;
     unit?: string;
+    lineWidth?: number;
 }
 export interface LineChartProps {
     data: LineChartDataPoint[];

package/dist/components/src/chart.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { BarChartDataPoint } from "./chart-bar";
+import { LineChartDataPoint } from "./chart-line";
+import { PieChartDataPoint } from "./chart-pie";
+import { HeatmapData } from "./chart-heatmap";
+export type ChartKPI = {
+    label: string;
+    value: string | number;
+};
+type BaseChartData = {
+    bar: BarChartDataPoint[];
+    line: LineChartDataPoint[];
+    pie: PieChartDataPoint[];
+    heatmap: HeatmapData;
+};
+export type ChartType = keyof BaseChartData;
+interface BaseChartProps {
+    type: ChartType;
+    title?: string;
+    tooltip?: string;
+    description?: string;
+    kpis?: ChartKPI[];
+    height?: number;
+}
+type ChartProps<T extends ChartType> = BaseChartProps & {
+    data: BaseChartData[T];
+};
+export declare const Chart: <T extends keyof BaseChartData>({ type, title, tooltip, description, kpis, data, height, }: ChartProps<T>) => React.JSX.Element;
+export {};

package/dist/components/src/table.d.ts

@@ -19,7 +19,6 @@ export interface TableProps<T extends Record<string, any>> {
     sortKey?: string;
     sortDirection?: SortDirection;
     columnsEditable?: boolean;
-    onSort?: (key: string, direction: SortDirection) => void;
     currentPage?: number;
     totalPages?: number;
     perPage?: number;
@@ -27,11 +26,14 @@ export interface TableProps<T extends Record<string, any>> {
         label: string;
         value: string;
     }[];
+    onSort?: (key: string, direction: SortDirection) => void;
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: string) => void;
+    onVisibleColumnsChange?: (keys: string[]) => void;
     maxHeight?: string;
     visibleColumns?: string[];
-    onVisibleColumnsChange?: (keys: string[]) => void;
     maxVisibleColumns?: number;
+    defaultVisibleColumns?: string[];
+    pinnedColumns?: string[];
 }
-export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, pinnedColumns, }: TableProps<T>): React.JSX.Element;

package/dist/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/legend.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";

package/dist/css/src/chart.css

@@ -0,0 +1,76 @@
+.chart-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.chart-header {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.chart-title-container {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.chart-title {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  /* color: hsl(var(--muted-200)); */
+}
+
+.chart-info-icon {
+  color: hsl(var(--muted));
+  cursor: help;
+}
+
+.chart-metadata {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.chart-kpis {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid hsl(var(--muted-50));
+}
+
+.chart-kpi {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.chart-kpi-label {
+  font-size: 0.875rem;
+  color: hsl(var(--muted-200));
+}
+
+.chart-kpi-value {
+  font-size: 1.5rem;
+  font-weight: 600;
+  /* color: hsl(var(--muted-200)); */
+}
+
+.chart-legend {
+  padding-top: 0.5rem;
+}
+
+.chart-header-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.chart-description {
+  font-size: 1rem;
+  color: hsl(var(--muted-200));
+}

package/dist/css/src/charts.css

@@ -50,11 +50,14 @@
 .heatmap-container {
   width: 100%;
   padding: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .heatmap-grid {
   display: grid;
   gap: 0.5rem;
+  flex-grow: 1;
 }
 
 .heatmap-col-header {
@@ -79,6 +82,11 @@
 .heatmap-cell {
   padding: 0.75rem;
   overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .heatmap-cell-content {
@@ -99,3 +107,10 @@
   width: 0.75rem;
   height: 0.75rem;
 }
+
+.heatmap-cell-tooltip-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}

package/dist/css/src/index.css

@@ -61,4 +61,5 @@
 @import "./src/message.css";
 @import "./src/multi-menu.css";
 @import "./src/charts.css";
+@import "./src/chart.css";
 @import "./src/legend.css";

package/dist/css/src/table.css

@@ -136,6 +136,13 @@
   padding: 1rem;
 }
 
+.edit-columns-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
 .edit-columns-title {
   font-size: 1rem;
   font-weight: 600;

package/dist/esm/components/index.d.ts

@@ -35,3 +35,4 @@ export * from "./src/chart-pie";
 export * from "./src/chart-stat";
 export * from "./src/date-range-picker";
 export * from "./src/legend";
+export * from "./src/chart";

package/dist/esm/components/src/chart-heatmap.d.ts

@@ -11,5 +11,8 @@ export interface HeatmapData {
 export interface HeatmapChartProps {
     data: HeatmapData;
     showPercentage?: boolean;
+    height?: string | number;
+    showValue?: boolean;
+    showPercentageInTooltip?: boolean;
 }
-export declare const HeatmapChart: ({ data, showPercentage, }: HeatmapChartProps) => React.JSX.Element;
+export declare const HeatmapChart: ({ data, showPercentage, height, showValue, showPercentageInTooltip, }: HeatmapChartProps) => React.JSX.Element;

package/dist/esm/components/src/chart-line.d.ts

@@ -8,6 +8,7 @@ export interface LineProps {
     stroke: string;
     dashed?: boolean;
     unit?: string;
+    lineWidth?: number;
 }
 export interface LineChartProps {
     data: LineChartDataPoint[];

package/dist/esm/components/src/chart.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { BarChartDataPoint } from "./chart-bar";
+import { LineChartDataPoint } from "./chart-line";
+import { PieChartDataPoint } from "./chart-pie";
+import { HeatmapData } from "./chart-heatmap";
+export type ChartKPI = {
+    label: string;
+    value: string | number;
+};
+type BaseChartData = {
+    bar: BarChartDataPoint[];
+    line: LineChartDataPoint[];
+    pie: PieChartDataPoint[];
+    heatmap: HeatmapData;
+};
+export type ChartType = keyof BaseChartData;
+interface BaseChartProps {
+    type: ChartType;
+    title?: string;
+    tooltip?: string;
+    description?: string;
+    kpis?: ChartKPI[];
+    height?: number;
+}
+type ChartProps<T extends ChartType> = BaseChartProps & {
+    data: BaseChartData[T];
+};
+export declare const Chart: <T extends keyof BaseChartData>({ type, title, tooltip, description, kpis, data, height, }: ChartProps<T>) => React.JSX.Element;
+export {};

package/dist/esm/components/src/table.d.ts

@@ -19,7 +19,6 @@ export interface TableProps<T extends Record<string, any>> {
     sortKey?: string;
     sortDirection?: SortDirection;
     columnsEditable?: boolean;
-    onSort?: (key: string, direction: SortDirection) => void;
     currentPage?: number;
     totalPages?: number;
     perPage?: number;
@@ -27,11 +26,14 @@ export interface TableProps<T extends Record<string, any>> {
         label: string;
         value: string;
     }[];
+    onSort?: (key: string, direction: SortDirection) => void;
     onPageChange?: (page: number) => void;
     onPerPageChange?: (perPage: string) => void;
+    onVisibleColumnsChange?: (keys: string[]) => void;
     maxHeight?: string;
     visibleColumns?: string[];
-    onVisibleColumnsChange?: (keys: string[]) => void;
     maxVisibleColumns?: number;
+    defaultVisibleColumns?: string[];
+    pinnedColumns?: string[];
 }
-export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, }: TableProps<T>): React.JSX.Element;
+export declare function Table<T extends Record<string, any>>({ columns, data, isLoading, className, rowHeight, sortKey, sortDirection, onSort, currentPage, totalPages, perPage, perPageOptions, onPageChange, onPerPageChange, maxHeight, columnsEditable, containerClassName, visibleColumns, onVisibleColumnsChange, maxVisibleColumns, defaultVisibleColumns, pinnedColumns, }: TableProps<T>): React.JSX.Element;

package/dist/esm/css/index.css

@@ -1 +1 @@
-:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/legend.css";
+:root{--primary-disabled:225 100% 88%;--primary-muted:221 100% 95%;--primary:225 91% 59%;--primary-200:225 100% 43%;--primary-300:225 91% 40%;--primary-400:225 91% 18%;--success-bg:143 26% 86%;--success:130 35% 46%;--success-200:130 76% 26%;--success-300:130 100% 18%;--warning-bg:45 100% 84%;--warning:45 100% 61%;--warning-200:45 100% 45%;--warning-300:45 100% 32%;--destructive-bg:357 100% 92%;--destructive:0 83% 60%;--destructive-200:0 100% 42%;--destructive-300:0 100% 29%;--muted-25:0 0 98%;--muted-50:0 0 96%;--muted:0 0 80%;--muted-200:0 0 67%;--radius-sm:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-full:9999px}@import "./src/accordion.css";@import "./src/button.css";@import "./src/calendar.css";@import "./src/checkbox.css";@import "./src/content-switch.css";@import "./src/date-range-picker.css";@import "./src/dropdown.css";@import "./src/input.css";@import "./src/modal.css";@import "./src/multi-select.css";@import "./src/compact-multi-select.css";@import "./src/popover.css";@import "./src/radio.css";@import "./src/search.css";@import "./src/side-panel.css";@import "./src/status.css";@import "./src/tabs.css";@import "./src/tag.css";@import "./src/textarea.css";@import "./src/toggle.css";@import "./src/tooltip.css";@import "./src/pagination.css";@import "./src/table.css";@import "./src/toast.css";@import "./src/month-calendar.css";@import "./src/loader.css";@import "./src/message.css";@import "./src/multi-menu.css";@import "./src/charts.css";@import "./src/chart.css";@import "./src/legend.css";