@scality/core-ui 0.168.0 → 0.169.0

package/dist/style/theme.d.ts.map

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

package/dist/style/theme.js

@@ -33,6 +33,7 @@ export const coreUIAvailableThemesNames = [
     'darkRebrand',
     'artescaLight',
     'ring9dark',
+    'G-Dark'
 ];
 export const coreUIAvailableThemes = {
     darkRebrand: {
@@ -110,6 +111,31 @@ export const coreUIAvailableThemes = {
         textReverse: '#000000',
         textLink: '#71AEFF',
     },
+    'G-Dark': {
+        statusHealthy: '#0AADA6',
+        statusHealthyRGB: '10,173,166',
+        statusWarning: '#F8F32B',
+        statusWarningRGB: '248,243,43',
+        statusCritical: '#E84855',
+        statusCriticalRGB: '232,72,85',
+        selectedActive: '#037AFF',
+        highlight: '#1A3C75',
+        border: '#4A4A4A',
+        buttonPrimary: 'linear-gradient(130deg, #9355E7 0%, #2E4AA3 100%)',
+        buttonSecondary: 'linear-gradient(130deg, #595A78 0%, #44455F 100%)',
+        buttonDelete: '#3D0808',
+        infoPrimary: '#8E8EAC',
+        infoSecondary: '#333366',
+        backgroundLevel1: '#121219',
+        backgroundLevel2: '#323245',
+        backgroundLevel3: '#232331',
+        backgroundLevel4: '#1B1B27',
+        textPrimary: '#EAEAEA',
+        textSecondary: '#B5B5B5',
+        textTertiary: '#DFDFDF',
+        textReverse: '#000000',
+        textLink: '#71AEFF',
+    },
 };
 /**
  * @deprecated

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.168.0",
+  "version": "0.169.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -22,7 +22,7 @@
     "test": "jest",
     "storybook": "storybook dev -p 3000",
     "build-storybook": "storybook build",
-    "storybook:deploy": "storybook-to-ghpages"
+    "storybook:deploy": "npm run build-storybook && gh-pages -d storybook-static -u \"github-actions-bot <support+actions@github.com>\""
   },
   "keywords": [],
   "browserslist": [
@@ -67,6 +67,7 @@
     "eslint": "^8.15.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-plugin-storybook": "^0.10.1",
+    "gh-pages": "^6.3.0",
     "husky": "^3.0.5",
     "jest": "^30.0.5",
     "jest-canvas-mock": "^2.3.1",
@@ -84,7 +85,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.3",
-    "@floating-ui/react": "^0.26.28",
+    "@floating-ui/react": "^0.27.15",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
@@ -96,7 +97,7 @@
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react-dropzone": "^14.2.3",
-    "react-hook-form": "^7.49.2",
+    "react-hook-form": "^7.62.0",
     "react-query": "^3.34.0",
     "react-router": "7.8.1",
     "react-router-dom": "7.8.1",

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { getWrapper } from '../../testUtils';
-import { Barchart, CustomTick, formatDate } from './Barchart.component';
+import { Barchart, CustomTick } from './Barchart.component';
 import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
 import React from 'react';
 

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -14,13 +14,14 @@ import styled, { useTheme } from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { chartColors, 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, UnitRange, useChartData } from './utils';
-import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
-import { FormattedDateTime } from '../date/FormattedDateTime';
+import { ChartTooltip } from './ChartTooltip';
+import { UnitRange, useChartData } from './utils';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
@@ -344,6 +345,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
                   fill={chartColors[fill] || fill}
                   minPointSize={stacked ? 0 : CHART_CONSTANTS.MIN_POINT_SIZE}
                   stackId={stackId}
+                  isAnimationActive={false}
                   onMouseOver={() => setHoveredValue(dataKey)}
                   onMouseLeave={() => setHoveredValue(undefined)}
                 />
@@ -390,9 +392,15 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             />
 
             <Tooltip
-              content={(props: TooltipContentProps<number, string>) =>
-                renderTooltipContent(props, tooltip, hoveredValue)
-              }
+              content={(props: TooltipContentProps<number, string>) => (
+                <ChartTooltip
+                  type={type}
+                  colorSet={colorSet}
+                  tooltipProps={props}
+                  hoveredValue={hoveredValue}
+                  tooltip={tooltip}
+                />
+              )}
               cursor={false}
             />
           </BarChart>

package/src/lib/components/barchartv2/ChartTooltip.test.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ChartTooltip } from './ChartTooltip';
+
+const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
+const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
+const SUCCESS_VALUE = 39;
+const FAILED_VALUE = 13;
+const testTooltipProps = {
+  payload: [
+    { name: 'Success', value: SUCCESS_VALUE },
+    { name: 'Failed', value: FAILED_VALUE },
+  ],
+  label: 'Test',
+  coordinate: { x: 10, y: 10 },
+  active: true,
+  accessibilityLayer: false,
+};
+const testTooltip = () => <div>Test Tooltip</div>;
+const date = new Date('2024-07-01T00:00:00').getTime();
+
+describe('ChartTooltip', () => {
+  const selectors = {
+    tooltip: () => screen.queryByText(/Test Tooltip/),
+    category: () => screen.queryByText(/Test/),
+    success: () => screen.queryByText(/Success/),
+    successValue: () => screen.queryByText(SUCCESS_VALUE),
+    failed: () => screen.queryByText(/Failed/),
+    failedValue: () => screen.queryByText(FAILED_VALUE),
+    date: () => screen.queryByText(/Monday, 1 July 2024/),
+    time: () => screen.queryByText(/00:00/),
+  };
+  it('should render the ChartTooltip component', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={testTooltipProps}
+        hoveredValue="Success"
+        tooltip={undefined}
+      />,
+    );
+    expect(selectors.category()).toBeInTheDocument();
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+  });
+  it('should render tooltip when tooltip is provided', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={testTooltipProps}
+        hoveredValue="Success"
+        tooltip={testTooltip}
+      />,
+    );
+    expect(selectors.tooltip()).toBeInTheDocument();
+  });
+  it('should not render tooltip when tooltipProps is not active', () => {
+    render(
+      <ChartTooltip
+        type={{ type: 'category' }}
+        tooltipProps={{ ...testTooltipProps, active: false }}
+        hoveredValue="Success"
+        tooltip={testTooltip}
+      />,
+    );
+    expect(selectors.tooltip()).not.toBeInTheDocument();
+  });
+  it('should render time tooltip when type is time', () => {
+    // timestamp for Mon Jul 01 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
+    const label = date;
+    render(
+      <ChartTooltip
+        type={{
+          type: 'time',
+          timeRange: {
+            startDate: new Date(),
+            endDate: new Date(),
+            interval: ONE_DAY_IN_MILLISECONDS,
+          },
+        }}
+        tooltipProps={{ ...testTooltipProps, label }}
+        hoveredValue="Success"
+      />,
+    );
+
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+
+    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.time()).not.toBeInTheDocument();
+  });
+  it('should render time tooltip when type is time and interval is one hour', () => {
+    const label = date;
+    render(
+      <ChartTooltip
+        type={{
+          type: 'time',
+          timeRange: {
+            startDate: new Date(),
+            endDate: new Date(),
+            interval: ONE_HOUR_IN_MILLISECONDS,
+          },
+        }}
+        tooltipProps={{ ...testTooltipProps, label }}
+        hoveredValue="Success"
+      />,
+    );
+    expect(selectors.success()).toBeInTheDocument();
+    expect(selectors.successValue()).toBeInTheDocument();
+    expect(selectors.failed()).toBeInTheDocument();
+    expect(selectors.failedValue()).toBeInTheDocument();
+    expect(selectors.date()).toBeInTheDocument();
+    expect(selectors.time()).toBeInTheDocument();
+  });
+});

package/src/lib/components/barchartv2/ChartTooltip.tsx

@@ -1,10 +1,17 @@
 import styled from 'styled-components';
 import { spacing, Stack, Wrap } from '../../spacing';
 import { Text } from '../text/Text.component';
-import { BarchartBars } from './Barchart.component';
+import {
+  BarchartBars,
+  BarchartTooltipFn,
+  CategoryType,
+  TimeType,
+} from './Barchart.component';
 import { fontSize, fontWeight } from '../../style/theme';
 import { LegendShape } from '../chartlegend/ChartLegend';
 import { FormattedDateTime } from '../date/FormattedDateTime';
+import { TooltipContentProps } from 'recharts';
+import { getCurrentPoint } from './utils';
 
 export const ChartTooltipContainer = styled.div`
   background-color: ${({ theme }) => theme.backgroundLevel1};
@@ -30,24 +37,45 @@ export const ChartTooltipItem = styled.div<{ isHovered: boolean }>`
 
 export const ChartTooltip = <T extends BarchartBars>({
   type,
-  currentPoint,
+  tooltipProps,
   colorSet,
+  hoveredValue,
+  tooltip,
 }: {
-  type: 'time' | 'category';
-  currentPoint: {
-    category: string | number;
-    values: { label: T[number]['label']; value: number; isHovered: boolean }[];
-  };
-  colorSet: Record<string, string>;
+  type: TimeType | CategoryType;
+  tooltipProps: TooltipContentProps<number, string>;
+  colorSet?: Record<string, string>;
+  hoveredValue: string | undefined;
+  tooltip?: BarchartTooltipFn<T>;
 }) => {
+  const { active } = tooltipProps;
+
+  if (!active) {
+    return null;
+  }
+
+  const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
+  if (tooltip) {
+    return tooltip(currentPoint);
+  }
+
   return (
     <ChartTooltipContainer>
       <Text isEmphazed>
-        {type === 'time' ? (
-          <FormattedDateTime
-            format="long-date"
-            value={new Date(currentPoint.category)}
-          />
+        {type.type === 'time' ? (
+          <>
+            <FormattedDateTime
+              format="long-date"
+              value={new Date(currentPoint.category)}
+            />{' '}
+            {type.type === 'time' &&
+              type.timeRange.interval < 24 * 60 * 60 * 1000 && (
+                <FormattedDateTime
+                  format="time"
+                  value={new Date(currentPoint.category)}
+                />
+              )}
+          </>
         ) : (
           currentPoint.category
         )}
@@ -55,13 +83,15 @@ export const ChartTooltip = <T extends BarchartBars>({
       <Stack direction="vertical" gap="r8" style={{ width: '100%' }}>
         {currentPoint.values.map((value) => {
           return (
-            <Wrap key={value.label}>
+            <Wrap key={value.label} gap={spacing.r32}>
               <ChartTooltipItem isHovered={value.isHovered}>
-                <LegendShape
-                  color={colorSet[value.label as keyof typeof colorSet]}
-                  shape="rectangle"
-                  chartColors={colorSet}
-                />
+                {colorSet && (
+                  <LegendShape
+                    color={colorSet[value.label as keyof typeof colorSet]}
+                    shape="rectangle"
+                    chartColors={colorSet}
+                  />
+                )}
                 {value.label}
               </ChartTooltipItem>
               <ChartTooltipItem isHovered={value.isHovered}>

package/src/lib/components/barchartv2/utils.test.ts

@@ -4,9 +4,9 @@ import {
   computeUnitLabelAndRoundReferenceValue,
   filterChartDataAndBarsByLegendSelection,
   formatPrometheusDataToRechartsDataAndBars,
+  getCurrentPoint,
   getMaxBarValue,
   getRoundReferenceValue,
-  renderTooltipContent,
   sortStackedBars,
   transformCategoryData,
   transformTimeData,
@@ -770,53 +770,38 @@ describe('sortStackedBars', () => {
   });
 });
 
-describe('renderTooltipContent', () => {
-  it('should return null when active is false', () => {
-    const props = {
-      active: false,
-      payload: [],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, undefined);
-    expect(result).toBeNull();
-  });
-
-  it('should return null when tooltip is undefined', () => {
-    const props = {
-      active: true,
-      payload: [{ name: 'test', value: 10 }],
-      label: 'test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    const result = renderTooltipContent(props, undefined, 'test');
-    expect(result).toBeNull();
-  });
-  it('should call tooltip with the correct props', () => {
-    const tooltip = jest.fn();
-    const props = {
-      active: true,
-      payload: [
-        { name: 'Success', value: 10 },
-        { name: 'Failed', value: 20 },
-      ],
-      label: 'Test',
-      coordinate: { x: 0, y: 0 },
-      accessibilityLayer: false,
-    };
-    renderTooltipContent(props, tooltip, 'Success');
-    expect(tooltip).toHaveBeenCalledWith({
+describe('getCurrentPoint', () => {
+  it('should return the current point', () => {
+    const result = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Success',
+    );
+    expect(result).toEqual({
+      category: 'Test',
+      values: [{ label: 'Success', value: 10, isHovered: true }],
+    });
+    const result2 = getCurrentPoint(
+      {
+        payload: [{ name: 'Success', value: 10 }],
+        label: 'Test',
+        coordinate: { x: 10, y: 10 },
+        active: true,
+        accessibilityLayer: false,
+      },
+      'Failed',
+    );
+    expect(result2).toEqual({
       category: 'Test',
-      values: [
-        { label: 'Success', value: 10, isHovered: true },
-        { label: 'Failed', value: 20, isHovered: false },
-      ],
+      values: [{ label: 'Success', value: 10, isHovered: false }],
     });
   });
 });
-
 describe('filterChartDataAndBarsByLegendSelection', () => {
   const mockChartData = [
     { category: 'Jan', Success: 10, Failed: 5, Warning: 3, Pending: 2 },

package/src/lib/components/barchartv2/utils.ts

@@ -428,35 +428,6 @@ export const sortStackedBars = (
   return barAverages.map(({ average, ...bar }) => bar);
 };
 
-export const renderTooltipContent = <T extends BarchartBars>(
-  props: TooltipContentProps<number, string>,
-  tooltip: BarchartTooltipFn<T> | undefined,
-  hoveredValue: string | undefined,
-) => {
-  const { active, payload, label } = props;
-
-  if (!active || !tooltip) {
-    return null;
-  }
-
-  const tooltipValues: {
-    label: T[number]['label'];
-    value: number;
-    isHovered: boolean;
-  }[] = payload.map((item) => ({
-    label: item.name,
-    value: item.value,
-    isHovered: item.name === hoveredValue,
-  }));
-
-  const currentPoint = {
-    category: label as string | number,
-    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
@@ -538,3 +509,25 @@ export const useChartData = <T extends BarchartBars>(
     rechartsData,
   };
 };
+
+export const getCurrentPoint = <T extends BarchartBars>(
+  props: TooltipContentProps<number, string>,
+  hoveredValue: string | undefined,
+) => {
+  const { payload, label } = props;
+
+  const tooltipValues: {
+    label: T[number]['label'];
+    value: number;
+    isHovered: boolean;
+  }[] = payload.map((item) => ({
+    label: item.name,
+    value: item.value,
+    isHovered: item.name === hoveredValue,
+  }));
+
+  return {
+    category: label as string | number,
+    values: tooltipValues,
+  };
+};

package/src/lib/components/buttonv2/Buttonv2.component.tsx

@@ -51,8 +51,10 @@ export const ButtonStyled = styled.button<Props>`
     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;
@@ -73,8 +75,10 @@ export const ButtonStyled = styled.button<Props>`
 
       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;
@@ -88,7 +92,8 @@ export const ButtonStyled = styled.button<Props>`
           &:active:enabled {
             cursor: pointer;
             color: ${brand.textPrimary};
-            border: ${spacing.r1} solid ${brand.buttonSecondary};
+            border: ${spacing.r1} solid transparent;
+            border-color: ${brand.buttonSecondary};
           }
         `;
 
@@ -112,13 +117,18 @@ export const ButtonStyled = styled.button<Props>`
 
       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}
@@ -129,6 +139,17 @@ export const ButtonStyled = styled.button<Props>`
             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/src/lib/components/date/FormattedDateTime.tsx

@@ -8,6 +8,16 @@ export const LONG_DATE_FORMATER = Intl.DateTimeFormat('en-GB', {
   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',
@@ -46,6 +56,10 @@ export const DAY_MONTH_ABBREVIATED_HOUR_MINUTE_SECOND = Intl.DateTimeFormat(
   },
 );
 
+/**
+ * @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',
@@ -64,6 +78,15 @@ export const YEAR_MONTH_DAY_FORMATTER = Intl.DateTimeFormat('en-CA', {
   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',
+});
+
 type FormattedDateTimeProps = {
   format:
     | 'date'
@@ -75,8 +98,10 @@ type FormattedDateTimeProps = {
     | 'day-month-abbreviated-hour-minute'
     | 'day-month-abbreviated-hour-minute-second'
     | 'long-date'
+    | 'long-date-without-weekday'
     | 'chart-date'
-    | 'year-month-day';
+    | 'year-month-day'
+    | 'month-day';
 
   value: Date;
 };
@@ -207,10 +232,14 @@ export const FormattedDateTime = ({
       );
     case 'long-date':
       return <>{LONG_DATE_FORMATER.format(value)}</>;
+    case 'long-date-without-weekday':
+      return <>{LONG_DATE_FORMATER_WITHOUT_WEEKDAY.format(value)}</>;
     case 'chart-date':
       return <>{DAY_MONTH_FORMATER.format(value).replace(/[ ,]/g, '')}</>;
     case 'year-month-day':
       return <>{YEAR_MONTH_DAY_FORMATTER.format(value)}</>;
+    case 'month-day':
+      return <>{MONTH_DAY_FORMATTER.format(value)}</>;
     default:
       return <></>;
   }