@centreon/ui 24.5.1 → 24.5.3

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@centreon/ui",
-  "version": "24.5.1",
+  "version": "24.5.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
     "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
     "eslint:fix": "pnpm eslint --fix",
-    "storybook": "storybook dev -p 9001 -c .storybook -s ../public",
+    "storybook": "storybook dev -p 9001 -c .storybook",
     "build:storybook": "storybook build -c .storybook -o .out",
     "test": "jest",
     "test:storybook:local": "test-storybook --url http://127.0.0.1:9001",
@@ -62,7 +62,7 @@
     "@storybook/addon-interactions": "^7.0.9",
     "@storybook/addon-styling": "^1.0.6",
     "@storybook/blocks": "^7.0.26",
-    "@storybook/builder-vite": "^7.0.9",
+    "@storybook/builder-vite": "^7.6.18",
     "@storybook/jest": "^0.1.0",
     "@storybook/manager-api": "^7.0.9",
     "@storybook/mdx2-csf": "^1.1.0",
@@ -104,7 +104,7 @@
     "use-resize-observer": "^9.1.0",
     "vite": "^4.3.5",
     "vite-plugin-istanbul": "^5.0.0",
-    "vite-plugin-svgr": "^3.2.0",
+    "vite-plugin-svgr": "^3.3.0",
     "vite-plugin-turbosnap": "^1.0.3"
   },
   "dependencies": {

package/src/Graph/BarStack/BarStack.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { BarType } from './models';
+import ResponsiveBarStack from './ResponsiveBarStack';
 
 import { BarStack } from '.';
 
@@ -26,7 +27,12 @@ const dataWithSmallNumber = [
 ];
 
 const meta: Meta<typeof BarStack> = {
-  component: BarStack
+  component: BarStack,
+  parameters: {
+    chromatic: {
+      delay: 1000
+    }
+  }
 };
 
 export default meta;
@@ -41,11 +47,7 @@ const TooltipContent = ({ label, color, value }: BarType): JSX.Element => {
 };
 
 const Template = (args): JSX.Element => {
-  return (
-    <div style={{ height: '300px', width: '500px' }}>
-      <BarStack {...args} />
-    </div>
-  );
+  return <ResponsiveBarStack height={300} width={500} {...args} />;
 };
 
 export const Vertical: Story = {

package/src/Graph/BarStack/ResponsiveBarStack.tsx

@@ -20,7 +20,7 @@ const DefaultLengd = ({ scale, direction }: LegendProps): JSX.Element => (
   <LegendComponent direction={direction} scale={scale} />
 );
 
-const BarStack = ({
+const ResponsiveBarStack = ({
   title,
   data,
   width,
@@ -73,7 +73,7 @@ const BarStack = ({
       <div
         className={classes.svgWrapper}
         style={{
-          height,
+          minHeight: height,
           width: svgWrapperWidth
         }}
       >
@@ -206,4 +206,4 @@ const BarStack = ({
   );
 };
 
-export default BarStack;
+export default ResponsiveBarStack;

package/src/Graph/HeatMap/HeatMap.stories.tsx

@@ -55,6 +55,26 @@ const Template = (args): JSX.Element => {
   return <HeatMap {...args} arrowClassName={classes.arrow} />;
 };
 
+const TileContent = ({
+  data,
+  backgroundColor
+}: {
+  backgroundColor: string;
+  data: Data;
+}): JSX.Element => (
+  <div
+    style={{
+      alignItems: 'center',
+      backgroundColor,
+      display: 'flex',
+      height: '100%',
+      justifyContent: 'center'
+    }}
+  >
+    {data.counter}
+  </div>
+);
+
 export const normal: Story = {
   args: {
     children: TileContent,

package/src/Graph/LineChart/index.stories.tsx

@@ -354,7 +354,7 @@ export const LineChartWithTimePeriod: Story = {
     start: defaultStart
   },
   parameters: {
-    chromatic: { diffThreshold: 0.1 }
+    chromatic: { disableSnapshot: true }
   }
 };
 

package/src/Graph/PieChart/PieChart.stories.tsx

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import { ArcType } from './models';
-
-import { PieChart } from '.';
+import ResponsivePie from './ResponsivePie';
 
 const data = [
   { color: '#88B922', label: 'Ok', value: 148 },
@@ -18,19 +17,20 @@ const dataWithBigNumbers = [
   { color: '#FF6666', label: 'Down', value: 122222 }
 ];
 
-const meta: Meta<typeof PieChart> = {
-  component: PieChart
+const meta: Meta<typeof ResponsivePie> = {
+  component: ResponsivePie,
+  parameters: {
+    chromatic: {
+      delay: 1000
+    }
+  }
 };
 
 export default meta;
-type Story = StoryObj<typeof PieChart>;
+type Story = StoryObj<typeof ResponsivePie>;
 
 const Template = (args): JSX.Element => {
-  return (
-    <div style={{ height: '350px', width: '350px' }}>
-      <PieChart {...args} />
-    </div>
-  );
+  return <ResponsivePie height={350} width={350} {...args} />;
 };
 
 export const Pie: Story = {
@@ -141,11 +141,7 @@ export const DonutWithTooltip: Story = {
 };
 
 const TemplateForSmallDimensions = (args): JSX.Element => {
-  return (
-    <div style={{ height: '130px', width: '130px' }}>
-      <PieChart {...args} />
-    </div>
-  );
+  return <ResponsivePie height={130} width={130} {...args} />;
 };
 
 export const PieWithSmallDimensions: Story = {

package/src/Graph/PieChart/ResponsivePie.tsx

@@ -93,7 +93,7 @@ const ResponsivePie = ({
       <div
         className={classes.svgWrapper}
         style={{
-          height,
+          minHeight: height,
           width: svgWrapperWidth
         }}
       >

package/src/TimePeriods/index.stories.tsx

@@ -10,6 +10,9 @@ import TimePeriod from '.';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
+  parameters: {
+    chromatic: { disableSnapshot: true }
+  },
   tags: ['autodocs']
 };
 
@@ -88,27 +91,20 @@ const args = {
   ]
 };
 
-const parameters = {
-  chromatic: { diffThreshold: 0.1 }
-};
-
 export const BasicTimePeriod: Story = {
   ...Template,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const WithExtraTimePeriods: Story = {
   ...Template,
   argTypes,
-  args,
-  parameters
+  args
 };
 
 export const WithExternalComponent: Story = {
   ...TemplateWithExternalComponent,
-  argTypes,
-  parameters
+  argTypes
 };
 
 export const SimpleTimePeriod: StorySimpleTimePeriod = {
@@ -116,6 +112,5 @@ export const SimpleTimePeriod: StorySimpleTimePeriod = {
   args: {
     endDate: dayjs(Date.now()).toDate(),
     startDate: dayjs(Date.now()).subtract(29, 'day').toDate()
-  },
-  parameters
+  }
 };

package/src/components/Form/Dashboard/translatedLabels.ts

@@ -1,4 +1,3 @@
-// TODO use i18n conventions for translation (interpolation, plurals, etc.) and setup for storybook (only works in FE atm.)
 export const labelMustBeMost = '{{label}} can be at most {{max}} characters';
 export const labelMustBeAtLeast =
   '{{label}} should be at least {{min}} characters long';

package/src/components/Form/Dashboard/DashboardForm.stories.ts

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { DashboardForm } from './DashboardForm';
-
-const meta: Meta<typeof DashboardForm> = {
-  component: DashboardForm
-};
-
-export default meta;
-type Story = StoryObj<typeof DashboardForm>;
-
-export const Default: Story = {
-  args: {
-    labels: {
-      actions: {
-        cancel: 'Cancel',
-        submit: {
-          create: 'Create',
-          update: 'Update'
-        }
-      },
-      entity: {
-        description: 'Description',
-        name: 'Name'
-      }
-    }
-  }
-};
-
-export const AsUpdateVariant: Story = {
-  args: {
-    ...Default.args,
-    resource: {
-      description: 'Description 1',
-      name: 'Dashboard 1'
-    },
-    variant: 'update'
-  }
-};