@scality/core-ui 0.167.0 → 0.169.0

package/.github/workflows/github-pages.yml

@@ -11,7 +11,9 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
-      - run: npm ci
-      - run: npm run storybook:deploy -- --ci
+      - run: |
+          git remote set-url origin https://${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}@github.com/$GITHUB_REPOSITORY
+          npm ci
+          npm run storybook:deploy
         env:
-          GH_TOKEN: ${{ github.actor }}:${{ secrets.GITHUB_TOKEN }}
+          STORYBOOK_DISABLE_TELEMETRY: 1

package/.storybook/preview.js

@@ -18,6 +18,7 @@ export const globalTypes = {
         { value: 'darkRebrand', title: ' A-Dark', icon: 'moon' },
         { value: 'artescaLight', title: 'A-Light', icon: 'sun' },
         { value: 'ring9dark', title: 'R-Dark', icon: 'moon' },
+        { value: 'G-Dark', title: 'G-Dark', icon: 'moon' },
       ],
     },
   },

package/dist/components/barchartv2/Barchart.component.d.ts

@@ -7,6 +7,10 @@ export type TimeType = {
         interval: number;
     };
 };
+export type CategoryType = {
+    type: 'category';
+    gap?: number;
+};
 export type Point = {
     key: string | number;
     values: {
@@ -36,7 +40,7 @@ export type BarchartSortFn<T extends BarchartBars> = (pointA: Record<T[number]['
     category: string | number;
 }) => 1 | -1 | 0;
 export type BarchartProps<T extends BarchartBars> = {
-    type: 'category' | TimeType;
+    type: CategoryType | TimeType;
     bars?: T;
     tooltip?: BarchartTooltipFn<T>;
     defaultSort?: BarchartSortFn<T>;

package/dist/components/barchartv2/Barchart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Barchart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/Barchart.component.tsx"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/Barchart.component.js

@@ -5,13 +5,14 @@ import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { chartColors, fontSize } from '../../style/theme';
 import { Box } from '../box/Box';
+import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 import { IconHelp } from '../iconhelper/IconHelper';
 import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
-import { renderTooltipContent, useChartData } from './utils';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { FormattedDateTime } from '../date/FormattedDateTime';
+import { ChartTooltip } from './ChartTooltip';
+import { useChartData } from './utils';
 const CHART_CONSTANTS = {
     TICK_WIDTH_OFFSET: 5,
     BAR_SIZE: 12,
@@ -94,7 +95,7 @@ export const Barchart = (props) => {
     const theme = useTheme();
     const { getColor } = useChartLegend();
     const [hoveredValue, setHoveredValue] = useState();
-    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = 'category', unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
+    const { height = CHART_CONSTANTS.DEFAULT_HEIGHT, bars, type = { type: 'category' }, unitRange, stacked, stackedBarSort = 'default', defaultSort, tooltip, title, secondaryTitle, helpTooltip, rightTitle, isLoading, isError, } = props;
     // Create colorSet from ChartLegendWrapper
     const colorSet = bars === null || bars === void 0 ? void 0 : bars.reduce((acc, bar) => {
         const color = getColor(bar.label);
@@ -104,9 +105,13 @@ export const Barchart = (props) => {
         return acc;
     }, {});
     const { rechartsBars, unitLabel, roundReferenceValue, rechartsData } = useChartData(bars || [], type, colorSet || {}, stacked, defaultSort, unitRange, stackedBarSort);
-    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
+    return (_jsxs(Stack, { direction: "vertical", gap: "r8", children: [_jsx(ChartHeader, { title: title, secondaryTitle: secondaryTitle, helpTooltip: helpTooltip, rightTitle: rightTitle }), isError || (!bars && !isLoading) ? (_jsx(Error, { height: height })) : isLoading ? (_jsx(Loading, { height: height })) : (_jsx(StyledResponsiveContainer, { width: "100%", height: height, children: _jsxs(BarChart, { data: rechartsData, accessibilityLayer: true, barSize: type.type === 'category'
+                        ? type.gap === 0
+                            ? undefined
+                            : CHART_CONSTANTS.BAR_SIZE
+                        : CHART_CONSTANTS.BAR_SIZE, height: height, margin: CHART_CONSTANTS.CHART_MARGIN, barCategoryGap: type.type === 'category' ? type.gap : undefined, children: [_jsx(CartesianGrid, { vertical: false, horizontal: false, fill: theme.backgroundLevel1 }), rechartsBars.map((bar) => {
                             const { fill, dataKey, stackId } = bar;
-                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
+                            return (_jsx(Bar, { dataKey: dataKey, fill: chartColors[fill] || fill, minPointSize: stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE, stackId: stackId, isAnimationActive: false, onMouseOver: () => setHoveredValue(dataKey), onMouseLeave: () => setHoveredValue(undefined) }, dataKey));
                         }), _jsx(YAxis, { tickCount: 1, unit: ` ${unitLabel}`, domain: [0, roundReferenceValue], tickFormatter: (value) => new Intl.NumberFormat('fr-FR').format(value.toFixed(0)) // Add a space as thousand separator
                             , axisLine: false, tick: {
                                 fill: theme.textSecondary,
@@ -117,5 +122,5 @@ export const Barchart = (props) => {
                                 stroke: theme.textSecondary,
                             }, axisLine: {
                                 stroke: theme.textSecondary,
-                            } }), _jsx(Tooltip, { content: (props) => renderTooltipContent(props, tooltip, hoveredValue), cursor: false })] }) }))] }));
+                            } }), _jsx(Tooltip, { content: (props) => (_jsx(ChartTooltip, { type: type, colorSet: colorSet, tooltipProps: props, hoveredValue: hoveredValue, tooltip: tooltip })), cursor: false })] }) }))] }));
 };

package/dist/components/barchartv2/ChartTooltip.d.ts

@@ -1,18 +1,14 @@
-import { BarchartBars } from './Barchart.component';
+import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
+import { TooltipContentProps } from 'recharts';
 export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const ChartTooltipItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     isHovered: boolean;
 }, never>;
-export declare const ChartTooltip: <T extends BarchartBars>({ type, currentPoint, colorSet, }: {
-    type: "time" | "category";
-    currentPoint: {
-        category: string | number;
-        values: {
-            label: T[number]["label"];
-            value: number;
-            isHovered: boolean;
-        }[];
-    };
-    colorSet: Record<string, string>;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, }: {
+    type: TimeType | CategoryType;
+    tooltipProps: TooltipContentProps<number, string>;
+    colorSet?: Record<string, string>;
+    hoveredValue: string | undefined;
+    tooltip?: BarchartTooltipFn<T>;
+}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 //# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/barchartv2/ChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKpD,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,qCAIhD;IACD,IAAI,EAAE,MAAM,GAAG,UAAU,CAAC;IAC1B,YAAY,EAAE;QACZ,QAAQ,EAAE,MAAM,GAAG,MAAM,CAAC;QAC1B,MAAM,EAAE;YAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,SAAS,EAAE,OAAO,CAAA;SAAE,EAAE,CAAC;KAC5E,CAAC;IACF,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC,4CAkCA,CAAC"}
+{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,4DAMhD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;CAChC,iIAwDA,CAAC"}

package/dist/components/barchartv2/ChartTooltip.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { Text } from '../text/Text.component';
 import { fontSize, fontWeight } from '../../style/theme';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import { FormattedDateTime } from '../date/FormattedDateTime';
+import { getCurrentPoint } from './utils';
 export const ChartTooltipContainer = styled.div `
   background-color: ${({ theme }) => theme.backgroundLevel1};
   padding: ${spacing.r4} ${spacing.r8};
@@ -24,8 +25,17 @@ export const ChartTooltipItem = styled.div `
   gap: 8px;
   font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
 `;
-export const ChartTooltip = ({ type, currentPoint, colorSet, }) => {
-    return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type === 'time' ? (_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
-                    return (_jsxs(Wrap, { children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet }), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
+export const ChartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, }) => {
+    const { active } = tooltipProps;
+    if (!active) {
+        return null;
+    }
+    const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+    if (tooltip) {
+        return tooltip(currentPoint);
+    }
+    return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type.type === 'time' ? (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) }), ' ', type.type === 'time' &&
+                            type.timeRange.interval < 24 * 60 * 60 * 1000 && (_jsx(FormattedDateTime, { format: "time", value: new Date(currentPoint.category) }))] })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
+                    return (_jsxs(Wrap, { gap: spacing.r32, children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet })), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
                 }) })] }));
 };

package/dist/components/barchartv2/utils.d.ts

@@ -1,4 +1,4 @@
-import { BarchartProps, BarchartBars, BarchartTooltipFn } from './Barchart.component';
+import { BarchartProps, BarchartBars } from './Barchart.component';
 import { TooltipContentProps } from 'recharts';
 import { ChartColors } from '../../style/theme';
 export declare const getRoundReferenceValue: (value: number) => number;
@@ -81,7 +81,6 @@ export declare const sortStackedBars: (rechartsBars: {
     fill: string;
     stackId?: string;
 }[];
-export declare const renderTooltipContent: <T extends BarchartBars>(props: TooltipContentProps<number, string>, tooltip: BarchartTooltipFn<T> | undefined, hoveredValue: string | undefined) => import("react").ReactNode;
 /**
  * Filters both chart data and recharts bars to only include selected resources from legend
  * @param data - Array of chart data objects with category and resource values
@@ -115,4 +114,12 @@ export declare const useChartData: <T extends BarchartBars>(bars: T, type: Barch
     roundReferenceValue: number;
     rechartsData: any;
 };
+export declare const getCurrentPoint: <T extends BarchartBars>(props: TooltipContentProps<number, string>, hoveredValue: string | undefined) => {
+    category: string | number;
+    values: {
+        label: T[number]["label"];
+        value: number;
+        isHovered: boolean;
+    }[];
+};
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/barchartv2/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/utils.ts"],"names":[],"mappings":"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"}

package/dist/components/barchartv2/utils.js

@@ -174,10 +174,10 @@ const getRechartsBarsAndBarDataKeys = (bars, colorSet, stacked) => {
  */
 export const formatPrometheusDataToRechartsDataAndBars = (bars, type, colorSet, stacked, defaultSort, legendOrder) => {
     const { rechartsBars, barDataKeys } = getRechartsBarsAndBarDataKeys(bars, colorSet, stacked);
-    let data = type !== 'category' && type.type === 'time'
+    let data = type.type !== 'category' && type.type === 'time'
         ? transformTimeData(bars, type, barDataKeys)
         : transformCategoryData(bars, barDataKeys);
-    if (type === 'category' && defaultSort) {
+    if (type.type === 'category' && defaultSort) {
         data = applySortingToData(data, barDataKeys, defaultSort);
     }
     const sortedRechartsBars = sortStackedBars(rechartsBars, data, stacked, legendOrder);
@@ -270,22 +270,6 @@ export const sortStackedBars = (rechartsBars, data, stacked, legendOrder) => {
     // Remove the average property and keep only the bar data
     return barAverages.map(({ average, ...bar }) => bar);
 };
-export const renderTooltipContent = (props, tooltip, hoveredValue) => {
-    const { active, payload, label } = props;
-    if (!active || !tooltip) {
-        return null;
-    }
-    const tooltipValues = payload.map((item) => ({
-        label: item.name,
-        value: item.value,
-        isHovered: item.name === hoveredValue,
-    }));
-    const currentPoint = {
-        category: label,
-        values: tooltipValues,
-    };
-    return tooltip(currentPoint);
-};
 /**
  * Filters both chart data and recharts bars to only include selected resources from legend
  * @param data - Array of chart data objects with category and resource values
@@ -330,3 +314,15 @@ export const useChartData = (bars, type, colorSet, stacked, defaultSort, unitRan
         rechartsData,
     };
 };
+export const getCurrentPoint = (props, hoveredValue) => {
+    const { payload, label } = props;
+    const tooltipValues = payload.map((item) => ({
+        label: item.name,
+        value: item.value,
+        isHovered: item.name === hoveredValue,
+    }));
+    return {
+        category: label,
+        values: tooltipValues,
+    };
+};

package/dist/components/buttonv2/Buttonv2.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+GAqJxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Buttonv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/buttonv2/Buttonv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAW,KAAK,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE9E,eAAO,MAAM,iBAAiB,oIAI7B,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,GAAG,OAAO,CACjB,GAAG;IACF,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzD,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,eAAO,MAAM,YAAY,+GA0KxB,CAAC;AACF,eAAO,MAAM,WAAW,0GAIvB,CAAC;AACF,eAAO,MAAM,UAAU;WAAwB,KAAK,CAAC,SAAS;SAS7D,CAAC;AAEF,eAAO,MAAM,YAAY;;;SAaxB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACd,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,OAAO,EACP,OAAO,EACP,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,2CAqDP;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/dist/components/buttonv2/Buttonv2.component.js

@@ -35,8 +35,10 @@ export const ButtonStyled = styled.button `
     switch (props.variant) {
         case 'primary':
             return css `
-          background-color: ${brand.buttonPrimary};
-          border: ${spacing.r1} solid ${brand.buttonPrimary};
+          background: ${brand.buttonPrimary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonPrimary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -56,8 +58,10 @@ export const ButtonStyled = styled.button `
         `;
         case 'secondary':
             return css `
-          background-color: ${brand.buttonSecondary};
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          background: ${brand.buttonSecondary};
+          background-clip: padding-box, border-box;
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
@@ -71,7 +75,8 @@ export const ButtonStyled = styled.button `
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textPrimary};
-            border: ${spacing.r1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid transparent;
+            border-color: ${brand.buttonSecondary};
           }
         `;
         case 'danger':
@@ -93,13 +98,18 @@ export const ButtonStyled = styled.button `
         `;
         case 'outline':
             return css `
-          border: ${spacing.r1} solid ${brand.buttonSecondary};
+          border: ${spacing.r1} solid transparent;
+          border-color: ${brand.buttonSecondary};
           background-color: transparent;
           color: ${brand.textPrimary};
           &:hover:enabled {
             cursor: pointer;
             border-color: ${brand.infoPrimary};
             color: ${brand.textPrimary};
+
+            &::before {
+              background-image: ${brand.buttonPrimary};
+            }
           }
           &:focus-visible:enabled {
             ${FocusVisibleStyle}
@@ -110,6 +120,17 @@ export const ButtonStyled = styled.button `
             border: ${spacing.r1} solid ${brand.infoSecondary};
             color: ${brand.textPrimary};
           }
+          &::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            padding: ${spacing.r1};
+            background-image: ${brand.buttonSecondary};
+            border-radius: inherit;
+            mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+            mask-composite: exclude;
+            pointer-events: none;
+          }
         `;
         default:
     }

package/dist/components/date/FormattedDateTime.d.ts

@@ -1,12 +1,31 @@
 export declare const LONG_DATE_FORMATER: Intl.DateTimeFormat;
+/**
+ * @description Long date formatter, without weekday.
+ * @example 01 September 2025
+ */
+export declare const LONG_DATE_FORMATER_WITHOUT_WEEKDAY: Intl.DateTimeFormat;
 export declare const DATE_FORMATER: Intl.DateTimeFormat;
 export declare const DAY_MONTH_FORMATER: Intl.DateTimeFormat;
 export declare const TIME_SECOND_FORMATER: Intl.DateTimeFormat;
 export declare const TIME_FORMATER: Intl.DateTimeFormat;
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND: Intl.DateTimeFormat;
+/**
+ * @description Day month abbreviated hour minute formatter, without second.
+ * @example 15 Sept 14:30
+ */
 export declare const DAY_MONTH_ABBREVIATED_HOUR_MINUTE: Intl.DateTimeFormat;
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export declare const YEAR_MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
+/**
+ * @description Month day formatter, without year. Used for short term date ranges.
+ * @example 01-15
+ */
+export declare const MONTH_DAY_FORMATTER: Intl.DateTimeFormat;
 type FormattedDateTimeProps = {
-    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'chart-date';
+    format: 'date' | 'date-time' | 'date-time-second' | 'time' | 'time-second' | 'relative' | 'day-month-abbreviated-hour-minute' | 'day-month-abbreviated-hour-minute-second' | 'long-date' | 'long-date-without-weekday' | 'chart-date' | 'year-month-day' | 'month-day';
     value: Date;
 };
 export declare const FormattedDateTime: ({ format, value, }: FormattedDateTimeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/date/FormattedDateTime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,YAAY,CAAC;IAEjB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CAqHxB,CAAC"}
+{"version":3,"file":"FormattedDateTime.d.ts","sourceRoot":"","sources":["../../../src/lib/components/date/FormattedDateTime.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,kBAAkB,qBAK7B,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,kCAAkC,qBAI7C,CAAC;AAEH,eAAO,MAAM,aAAa,qBAKxB,CAAC;AAEH,eAAO,MAAM,kBAAkB,qBAI7B,CAAC;AAEH,eAAO,MAAM,oBAAoB,qBAK/B,CAAC;AAEH,eAAO,MAAM,aAAa,qBAIxB,CAAC;AAEH,eAAO,MAAM,wCAAwC,qBAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iCAAiC,qBAM5C,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,wBAAwB,qBAInC,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,qBAG9B,CAAC;AAEH,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EACF,MAAM,GACN,WAAW,GACX,kBAAkB,GAClB,MAAM,GACN,aAAa,GACb,UAAU,GACV,mCAAmC,GACnC,0CAA0C,GAC1C,WAAW,GACX,2BAA2B,GAC3B,YAAY,GACZ,gBAAgB,GAChB,WAAW,CAAC;IAEhB,KAAK,EAAE,IAAI,CAAC;CACb,CAAC;AAaF,eAAO,MAAM,iBAAiB,uBAG3B,sBAAsB,4CA2HxB,CAAC"}

package/dist/components/date/FormattedDateTime.js

@@ -7,6 +7,15 @@ export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
     month: 'long',
     day: 'numeric',
 });
+/**
+ * @description Long date formatter, without weekday.
+ * @example 01 September 2025
+ */
+export const LONG_DATE_FORMATER_WITHOUT_WEEKDAY = Intl.DateTimeFormat('en-GB', {
+    year: 'numeric',
+    month: 'long',
+    day: '2-digit',
+});
 export const DATE_FORMATER = Intl.DateTimeFormat('fr-CA', {
     year: 'numeric',
     month: '2-digit',
@@ -37,6 +46,10 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat('en-
     second: '2-digit',
     hour12: false,
 });
+/**
+ * @description Day month abbreviated hour minute formatter, without second.
+ * @example 15 Sept 14:30
+ */
 export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     day: 'numeric',
     month: 'short',
@@ -44,6 +57,23 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE = Intl.DateTimeFormat('en-GB', {
     minute: '2-digit',
     hour12: false,
 });
+/**
+ * @description Year month day formatter, without time. Used for describing long term date.
+ * @example 2025-01-01
+ */
+export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+});
+/**
+ * @description Month day formatter, without year. Used for short term date ranges.
+ * @example 01-15
+ */
+export const MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
+    month: '2-digit',
+    day: '2-digit',
+});
 const isItFutureOrIsItPast = (timeDiff, stringToBeFormatted) => {
     if (timeDiff > 0) {
         return `${stringToBeFormatted} ago`;
@@ -91,8 +121,14 @@ export const FormattedDateTime = ({ format, value, }) => {
             return (_jsx(_Fragment, { children: DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND.format(value).replace(',', '') }));
         case 'long-date':
             return _jsx(_Fragment, { children: LONG_DATE_FORMATER.format(value) });
+        case 'long-date-without-weekday':
+            return _jsx(_Fragment, { children: LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value) });
         case 'chart-date':
             return _jsx(_Fragment, { children: DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '') });
+        case 'year-month-day':
+            return _jsx(_Fragment, { children: YEAR_MONTH_DAY_FORMATTER.format(value) });
+        case 'month-day':
+            return _jsx(_Fragment, { children: MONTH_DAY_FORMATTER.format(value) });
         default:
             return _jsx(_Fragment, {});
     }

package/dist/components/linetemporalchart/ChartUtil.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAkCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}
+{"version":3,"file":"ChartUtil.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetemporalchart/ChartUtil.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AACtD,OAAO,+BAA+B,CAAC;AAEvC,MAAM,MAAM,QAAQ,GAAG;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IAEd,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC;IAEtB,eAAe,EAAE,OAAO,CAAC;IAEzB,QAAQ,EAAE,OAAO,CAAC;CACnB,EAAE,CAAC;AAKJ,wBAAgB,qBAAqB,CAAC,SAAS,EAAE,MAAM,UAEtD;AACD,wBAAgB,gBAAgB,CAC9B,2BAA2B,EAAE,KAAK,EAAE,GACnC,QAAQ,CAqBV;AAED,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,CAU3E;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE;IACT,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf,EAAE,EACH,QAAQ,EAAE,MAAM,GACf;IACD,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;CACnB,CAwCA;AAED;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,EACjD,iBAAiB,CAAC,EAAE,MAAM,EAC1B,cAAc,CAAC,EAAE,MAAM,EACvB,cAAc,CAAC,EAAE,MAAM,GACtB,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CA2CpC;AAGD,eAAO,MAAM,gBAAgB,UAAW,MAAM,QAAQ,MAAM,WAE3D,CAAC;AACF,eAAO,MAAM,4BAA4B,GAAI,CAAC,SAAS,CAAC,QAAQ,MAAM,KAAG,CAQxE,CAAC;AACF,eAAO,MAAM,gBAAgB,kBAAmB,MAAM,QAAQ,MAAM,WAEnE,CAAC;AAEF,eAAO,MAAM,eAAe,WAAY,KAAK,EAAE,KAAG,MAAM,EAMvD,CAAC"}

package/dist/components/linetemporalchart/ChartUtil.js

@@ -43,6 +43,12 @@ export function convertDataBaseValue(data, base) {
  * @returns {any}
  */
 export function getUnitLabel(unitRange, maxValue) {
+    if (!unitRange || unitRange.length === 0) {
+        return {
+            valueBase: 1,
+            unitLabel: '',
+        };
+    }
     // first sort the unitRange
     unitRange.sort((unitA, unitB) => {
         return unitA.threshold - unitB.threshold;

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts

@@ -27,9 +27,15 @@ export type LineChartProps = (NonSymmetricalChartSerie | SymmetricalChartSerie)
         label: string;
     }[];
     isLoading?: boolean;
+    /**
+     * The format of the x axis, default is 'date-time' which is like 01 Sep 16:00
+     * If you want to display the date only, you can set it to 'date' which is like 2025-09-01
+     * This will affect the format of the tooltip as well
+     */
+    timeFormat?: 'date-time' | 'date';
     yAxisTitle?: string;
     helpText?: string;
 };
-export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
+export declare function LineTimeSerieChart({ series, title, height, startingTimeStamp, interval, duration, unitRange, isLoading, timeFormat, yAxisType, yAxisTitle, helpText, ...rest }: LineChartProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=linetimeseriechart.component.d.ts.map

package/dist/components/linetimeseriechart/linetimeseriechart.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AA0FA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAiEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CAoShB"}
+{"version":3,"file":"linetimeseriechart.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx"],"names":[],"mappings":"AAoGA,MAAM,MAAM,KAAK,GAAG;IAElB,QAAQ,EAAE,MAAM,CAAC;IAEjB,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;IAEzC,eAAe,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IAEtE,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEF,KAAK,wBAAwB,GAAG;IAC9B,SAAS,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACrC,MAAM,EAAE,KAAK,EAAE,CAAC;CACjB,CAAC;AAGF,KAAK,qBAAqB,GAAG;IAC3B,SAAS,EAAE,aAAa,CAAC;IACzB,MAAM,EAAE;QACN,KAAK,EAAE,KAAK,EAAE,CAAC;QACf,KAAK,EAAE,KAAK,EAAE,CAAC;KAChB,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,CACzB,wBAAwB,GACxB,qBAAqB,CACxB,GAAG;IACF,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,MAAM,CAAC;QAClB,KAAK,EAAE,MAAM,CAAC;KACf,EAAE,CAAC;IACJ,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,UAAU,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC;AAkEF,wBAAgB,kBAAkB,CAAC,EACjC,MAAM,EACN,KAAK,EACL,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAiB,EACjB,UAAwB,EACxB,SAAqB,EACrB,UAAU,EACV,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,cAAc,2CA6ShB"}