feature: Toast component

fix dependencies

fix framer-motion

fix storybook webpack

update framer-motion

downgrade framer-motion

modify toast styles

modify export

cancel some exports

update toast

fix navbar issue

add useMutationsHandler in core-ui

review fixes

minor fixes

fix theme issue

fix generic type

try new generic types

fix generic modify type

fix type

typescript wizard

fix mutationconfig

update mutation

fix unknown

minor fixes

useMutationsHandler works fire !!

fix css color

fix toastprovider

.storybook/main.js

@@ -5,4 +5,16 @@ module.exports = {
     '@storybook/addon-storysource',
     '@storybook/addon-knobs',
   ],
+  webpackFinal: async (config, { configType }) => {
+    // Resolve error when webpack-ing storybook:
+    // Can't import the named export 'Children' from non EcmaScript module (only
+    // default export is available)
+    config.module.rules.push({
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+    });
+
+    return config;
+  },
 };

package.json

@@ -49,6 +49,7 @@
     "@storybook/theming": "^6.4.22",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^13.1.9",
     "@types/jest": "^27.5.0",
     "@types/react": "^18.0.8",
@@ -95,12 +96,12 @@
     "vega-tooltip": "^0.27.0"
   },
   "peerDependencies": {
-    "@js-temporal/polyfill": "^0.4.3",
     "@fortawesome/fontawesome-free": "^5.10.2",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
+    "@js-temporal/polyfill": "^0.4.3",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react": "^17.0.2",
@@ -137,6 +138,7 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.1.10"
+    "@floating-ui/dom": "^0.1.10",
+    "framer-motion": "^4.1.17"
   }
 }

src/lib/components/coreuithemeprovider/CoreUiThemeProvider.tsx

@@ -7,8 +7,11 @@ import { space, fontSize } from '../../style/theme';
  */
 type Theme = {
   statusHealthy: string;
+  statusHealthyRGB: string;
   statusWarning: string;
+  statusWarningRGB: string;
   statusCritical: string;
+  statusCriticalRGB: string;
   selectedActive: string;
   highlight: string;
   border: string;

src/lib/components/icon/Icon.component.tsx

@@ -1,4 +1,5 @@
 import React, {
+  CSSProperties,
   HTMLProps,
   PropsWithChildren,
   useEffect,
@@ -145,7 +146,7 @@ export type IconColor = keyof typeof brand;
 type Props = {
   name: IconName;
   size?: SizeProp;
-  color?: IconColor;
+  color?: IconColor | CSSProperties['color'];
   ariaLabel?: string;
   withWrapper?: boolean;
 };