@centreon/ui 26.12.14 → 26.12.16

package/README.md

@@ -57,9 +57,8 @@ To start Storybook server, run:
 
 # Tests architecture
 
-There are two kinds of tests in Centreon UI.
+Centreon UI tests are component tests:
 - Jest + RTL and Cypress: Component testing. We want to migrate from Jest to Cypress
-- Chromatic: Chromatic is a tool that snapshots our stories and better handle snapshots changes using a review process
 
 
 ### Run Jest tests

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.12.14",
+  "version": "26.12.16",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -48,7 +48,6 @@
   "exports": {
     ".": "./src/index.ts",
     "./components": "./src/components/index.ts",
-    "./fonts/*": "./src/fonts/*",
     "./test/testRenderer": "./test/testRenderer.tsx",
     "./tailwindcss": "./src/ThemeProvider/tailwindcss.css"
   },
@@ -129,6 +128,7 @@
     "@centreon/ui-context": "workspace:*"
   },
   "dependencies": {
+    "@fontsource/roboto": "^5.3.0",
     "@lexical/html": "^0.27.0",
     "@lexical/link": "^0.27.0",
     "@lexical/list": "^0.27.0",
@@ -153,7 +153,6 @@
     "@visx/visx": "3.12.0",
     "@visx/zoom": "^3.12.0",
     "anylogger": "^1.0.11",
-    "chromatic": "^13.3.3",
     "d3-array": "3.2.4",
     "dayjs": "^1.11.13",
     "highlight.js": "^11.11.1",

package/public/README.md

@@ -1,39 +1 @@
 > The assets in `public` are served as-is.
-
-
----
-
-### `public/fonts` → `@centreon/ui/fonts` alias
-
-The `ThemeProvider` specifies the `@font-face` for MUI.
-It imports the fonts using the `@centreon/ui/fonts` alias, but does not bundle them.
-
-
-
-#### ⚠️ **note** 
-When the `@centreon/ui` package is used as non-build dependency, then the `@centreon/ui/fonts` alias need to be added in the webpack config, and configured to handle the asset types.
-```js
-// webpack.config.js
-
-// alias
-resolve: {
-  alias: {
-    '@centreon/ui/fonts': path.resolve(
-      './node_modules/@centreon/ui/public/fonts'
-    )
-  }
-}
-
-// asset types
-module: {
-  rules: [
-    {
-      generator: {
-          filename: '[name][ext]'
-      },
-      test: /\.(woff|woff2|eot|ttf|otf)$/i,
-      type: 'asset/resource'
-    }
-  ]
-}
-```

package/src/Button/Save/index.stories.tsx

@@ -27,9 +27,6 @@ const meta = {
 
   component: ButtonSave,
 
-  parameters: {
-    chromatic: { delay: 300 }
-  },
   title: 'Button/Save'
 };
 

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

@@ -26,12 +26,7 @@ const dataWithSmallNumber = [
 ];
 
 const meta: Meta<typeof BarStack> = {
-  component: BarStack,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
+  component: BarStack
 };
 
 export default meta;

package/src/Graph/Chart/Chart.stories.tsx

@@ -358,9 +358,6 @@ export const LineChartWithTimePeriod: Story = {
     end: defaultEnd,
     height: 500,
     start: defaultStart
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true }
   }
 };
 

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

@@ -18,12 +18,7 @@ const dataWithBigNumbers = [
 ];
 
 const meta: Meta<typeof ResponsivePie> = {
-  component: ResponsivePie,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  }
+  component: ResponsivePie
 };
 
 export default meta;

package/src/Graph/Timeline/Timeline.stories.tsx

@@ -35,11 +35,6 @@ const Template = (args): JSX.Element => {
 
 const meta: Meta<typeof Timeline> = {
   component: Timeline,
-  parameters: {
-    chromatic: {
-      delay: 1000
-    }
-  },
   render: Template
 };
 

package/src/Graph/Tree/Tree.stories.tsx

@@ -153,8 +153,5 @@ export const treeWithZoom: Story = {
       getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
     }
   },
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  },
   render: TreeWithZoom
 };

package/src/ThemeProvider/index.tsx

@@ -14,15 +14,15 @@ import { GlobalStyles } from '@mui/system';
 
 import { ThemeMode, userAtom } from '@centreon/ui-context';
 
+import '@fontsource/roboto/300.css';
+import '@fontsource/roboto/400.css';
+import '@fontsource/roboto/500.css';
+import '@fontsource/roboto/700.css';
 import { useAtomValue } from 'jotai';
 import { equals, mergeDeepRight } from 'ramda';
 import { type ReactNode, useMemo } from 'react';
 import type { CSSInterpolation } from 'tss-react';
 
-import RobotoBoldWoff2 from '../fonts/roboto-bold-webfont.woff2';
-import RobotoLightWoff2 from '../fonts/roboto-light-webfont.woff2';
-import RobotoMediumWoff2 from '../fonts/roboto-medium-webfont.woff2';
-import RobotoRegularWoff2 from '../fonts/roboto-regular-webfont.woff2';
 import { getPalette } from './palettes';
 
 declare module '@mui/styles/defaultTheme' {
@@ -149,30 +149,6 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
     },
     MuiCssBaseline: {
       styleOverrides: (theme) => `
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 300;
-          src: local('Roboto'), local('Roboto-Light'), url(${RobotoLightWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 400;
-          src: local('Roboto'), local('Roboto-Regular'), url(${RobotoRegularWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 500;
-          src: local('Roboto'), local('Roboto-Medium'), url(${RobotoMediumWoff2}) format('woff2');
-        }
-        @font-face {
-          font-family: 'Roboto';
-          font-style: normal;
-          font-weight: 700;
-          src: local('Roboto'), local('Roboto-Bold'), url(${RobotoBoldWoff2}) format('woff2');
-        }
         body {
           background-color: ${theme.palette.background.paper};
         }

package/src/TimePeriods/index.stories.tsx

@@ -9,9 +9,6 @@ import { dateFormat } from './models';
 
 const meta: Meta<typeof TimePeriod> = {
   component: TimePeriod,
-  parameters: {
-    chromatic: { disableSnapshot: true }
-  },
   tags: ['autodocs']
 };