feat(toaster): implement component

Author: dpellier

packages/examples/accessibility-test/src/app/App.tsx

@@ -39,6 +39,7 @@ import {
   Text,
   Textarea,
   Timepicker, TimepickerControl, TimepickerTimezoneList,
+  Toaster, toast,
   Toggle,
   Tooltip,
   TooltipContent,
@@ -1206,6 +1207,16 @@ function App(): ReactElement {
           </FormField>
         </section>
 
+        <section>
+          <h1>Toaster</h1>
+
+          <Toaster duration={ Infinity } />
+
+          <button onClick={ () => toast('Some message') }>
+            Trigger toast
+          </button>
+        </section>
+
         <section>
           <h1>Toggle</h1>
 

packages/ods-react/package.json

@@ -36,6 +36,7 @@
     "@ark-ui/react": "5.25.1",
     "classnames": "2.5.1",
     "libphonenumber-js": "1.12.8",
+    "react-hot-toast": "2.6.0",
     "react-shiki": "0.9.0"
   },
   "peerDependencies": {

packages/ods-react/src/components/index.ts

@@ -41,3 +41,5 @@ export * from './combobox/src';
 
 export * from './tree-view/src';
 export * from './meter/src';
+
+export * from './toaster/src';

packages/ods-react/src/components/toaster/.storybook/main.ts

@@ -0,0 +1,26 @@
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  docs: {
+    autodocs: false,
+  },
+  framework: '@storybook/react-vite',
+  previewHead: (head) => `
+    ${head}
+    <style>
+      html, body {
+        font-family: "Source Sans Pro", "Trebuchet MS", "Arial", "Segoe UI", sans-serif;
+      }
+    </style>
+  `,
+  stories: [
+    '../src/dev.stories.tsx',
+    '../tests/**/*.stories.tsx',
+  ],
+};
+
+export default config;

packages/ods-react/src/components/toaster/.storybook/manager.ts

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/manager-api';
+
+addons.register('custom-panel', (api) => {
+  api.togglePanel(false);
+});
+
+addons.setConfig({
+  enableShortcuts: false,
+  showToolbar: true,
+});

packages/ods-react/src/components/toaster/.storybook/preview.ts

@@ -0,0 +1,9 @@
+import { type Preview } from '@storybook/react';
+import '@ovhcloud/ods-themes/default/css';
+import '@ovhcloud/ods-themes/default/fonts';
+
+const preview: Preview = {
+  parameters: {},
+};
+
+export default preview;

packages/ods-react/src/components/toaster/jest-puppeteer.config.ts

@@ -0,0 +1,17 @@
+const isCI = !!process.env.CI;
+
+export default {
+  launch: {
+    headless: isCI,
+    slowMo: isCI ? 0 : 300,
+    product: 'chrome',
+    args: [
+      '--no-sandbox',
+      '--disable-setuid-sandbox',
+      "--disable-dev-shm-usage",
+      "--disable-accelerated-2d-canvas",
+      "--disable-gpu",
+      '--font-render-hinting=none',
+    ],
+  },
+};

packages/ods-react/src/components/toaster/jest.config.ts

@@ -0,0 +1,26 @@
+const baseOption = {
+  collectCoverage: false,
+  testPathIgnorePatterns: [
+    'node_modules/',
+    'dist/',
+  ],
+  testRegex: 'tests\\/.*\\.spec\\.(ts|tsx)$',
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest',
+  },
+  verbose: true,
+};
+
+export default !!process.env.E2E ?
+  {
+    ...baseOption,
+    preset: 'jest-puppeteer',
+    testRegex: 'tests\\/.*\\.e2e\\.ts$',
+    testTimeout: 60000,
+  } : {
+    ...baseOption,
+    transform: {
+      ...baseOption.transform,
+      '\\.scss$': 'jest-transform-stub',
+    }
+  };

packages/ods-react/src/components/toaster/modules.d.ts

@@ -0,0 +1,2 @@
+declare module '*.css';
+declare module '*.scss';

packages/ods-react/src/components/toaster/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@ovhcloud/ods-react-toaster",
+  "version": "19.2.1",
+  "private": true,
+  "description": "ODS React Toaster component",
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rimraf documentation node_modules",
+    "doc": "npm run clean && npm run doc:ts && npm run doc:css",
+    "doc:css": "sass src/components:documentation --no-source-map --pkg-importer=node && node ../../../scripts/generate-component-token-list.js",
+    "doc:ts": "typedoc",
+    "lint:a11y": "eslint --config ../../../../../.eslintrc-a11y 'src/**/*.{js,ts,tsx}' --ignore-pattern '*.stories.tsx'",
+    "lint:scss": "stylelint --aei 'src/components/**/*.scss'",
+    "lint:ts": "eslint '{src,tests}/**/*.{js,ts,tsx}' --ignore-pattern '*.stories.tsx'",
+    "start": "npm run start:storybook",
+    "start:storybook": "storybook dev -p 3000 --no-open",
+    "test:e2e": "E2E=true start-server-and-test 'npm run start:storybook' 3000 'jest -i --detectOpenHandles'",
+    "test:e2e:ci": "CI=true npm run test:e2e",
+    "test:spec": "jest --passWithNoTests",
+    "test:spec:ci": "npm run test:spec"
+  }
+}