feature: Toast component

fix dependencies

fix framer-motion

fix storybook webpack

update framer-motion

downgrade framer-motion

modify toast styles

modify export

.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

@@ -95,12 +95,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 +137,7 @@
     }
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.1.10"
+    "@floating-ui/dom": "^0.1.10",
+    "framer-motion": "^4.1.17"
   }
 }

src/lib/components/progressbar/ProgressBar.component.tsx

@@ -4,7 +4,7 @@ import * as defaultTheme from '../../style/theme';
 import { Size } from '../constants';
 export type ProgressBarProps = {
   percentage: number;
-  size?: Size;
+  size?: Size | 'custom';
   color?: string;
   // The color of unfill bar
   backgroundColor?: string;
@@ -15,12 +15,14 @@ export type ProgressBarProps = {
   buildinLabel?: string;
   // The animation to full the progress bar
   isAnimation?: boolean;
+  height?: React.CSSProperties['height'];
 };
 const Container = styled.div``;
 const ProgressBarContainer = styled.div<{
   backgroundColor: string;
-  size: keyof typeof defaultTheme.fontSize;
+  size: keyof typeof defaultTheme.fontSize | 'custom';
   buildinLabel?: string;
+  height?: React.CSSProperties['height'];
 }>`
   display: flex;
   border-radius: 4px;
@@ -52,6 +54,11 @@ const ProgressBarContainer = styled.div<{
           height: 20px;
         `;
 
+      case 'custom':
+        return css`
+          height: ${props.height};
+          font-size: ${props.height};
+        `;
       default:
         return css`
           height: ${defaultTheme.fontSize.base};
@@ -148,6 +155,7 @@ function ProgressBar({
   bottomRightLabel,
   buildinLabel,
   isAnimation = false,
+  height,
   ...rest
 }: ProgressBarProps) {
   return (
@@ -171,6 +179,7 @@ function ProgressBar({
         size={size}
         buildinLabel={buildinLabel}
         backgroundColor={backgroundColor}
+        height={height}
       >
         <FilledAreaContainer
           color={color}