works without styled-components now. animation doesnt work tho..

lib/NotificationContext.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as uuid from "uuid";
+import uid from "./util/uid";
 import NotificationManager from "./NotificationManager";
 
 export type NotificationVariant = "info" | "success" | "warning" | "danger";
@@ -81,7 +81,7 @@ const NotificationProvider: React.FC<ProviderProps> = ({
 
   const spawn = React.useCallback(
     (opts: SpawnOpts) => {
-      const id = opts.id || uuid.v4();
+      const id = opts.id || uid();
       const newNotification = {
         id,
         title: opts.title,

lib/NotificationManager.tsx

@@ -1,105 +1,16 @@
 import * as React from "react";
-import styled, { css } from "styled-components";
 import {
   NotificationStackInterface,
-  NotificationVariant,
   VerticalDirectionType,
   HorizontalDirectionType,
 } from "./NotificationContext";
-import {
-  FADE_IN_RIGHT,
-  FADE_IN_LEFT,
-  FADE_OUT_BOTTOM,
-} from "./util/animations";
-
-const NotificationWrapper = styled.div<{
-  verticalDirection?: VerticalDirectionType;
-  horizontalDirection?: HorizontalDirectionType;
-}>`
-  position: fixed;
-  top: 0;
-  right: 0;
-
-  ${(props) =>
-    props.verticalDirection === "bottom" &&
-    css`
-      bottom: 0;
-      top: initial;
-    `};
-
-  ${(props) =>
-    props.horizontalDirection === "left" &&
-    css`
-      left: 0;
-      right: initial;
-    `};
-
-  z-index: 5;
-  display: flex;
-  padding: 1rem;
-  flex-direction: column;
-`;
-const StyledNotification = styled.div<{
-  variant?: NotificationVariant;
-  horizontalDirection?: HorizontalDirectionType;
-  despawn?: boolean;
-}>`
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
-  background: #fff;
-  padding: 1rem 1rem;
-  background-color: blue;
-  color: #fff;
-  font-family: sans-serif;
-  border-radius: 5px;
-  width: 20rem;
-  display: flex;
-  flex-direction: column;
-  animation: ${FADE_IN_RIGHT} 0.24s 0.24s ease-out both;
 
-  ${(props) =>
-    props.horizontalDirection === "left" &&
-    css`
-      animation: ${FADE_IN_LEFT} 0.24s 0.24s ease-out both;
-    `};
-
-  ${(props) =>
-    props.despawn &&
-    css`
-      animation: ${FADE_OUT_BOTTOM} 0.12s ease-out both;
-    `};
-
-  &:not(:last-child) {
-    margin-bottom: 0.5rem;
-  }
-
-  ${(props) =>
-    props.variant === "danger" &&
-    css`
-      background-color: red;
-      color: #fff;
-    `};
-
-  ${(props) =>
-    props.variant === "warning" &&
-    css`
-      background-color: orange;
-      color: #222;
-    `};
-  ${(props) =>
-    props.variant === "success" &&
-    css`
-      background-color: green;
-      color: #fff;
-    `};
-`;
-
-const NotificationTitle = styled.p`
-  margin: 0;
-`;
-
-const NotificationInfo = styled.small`
-  margin-top: 0.5rem;
-`;
+import {
+  notificationWrapperStyles,
+  notificationElementStyles,
+  notificationTitleStyles,
+  notificationSubtitleStyles,
+} from "./util/styles";
 
 interface Props {
   notifications: NotificationStackInterface[];
@@ -117,31 +28,35 @@ const NotificationManager: React.FC<Props> = ({
   if (notifications.length === 0) return null;
 
   return (
-    <NotificationWrapper
-      verticalDirection={verticalDirection}
-      horizontalDirection={horizontalDirection}
+    <div
+      style={notificationWrapperStyles({
+        verticalDirection,
+        horizontalDirection,
+      })}
     >
       {notifications.map((notification) => {
-        console.log(notification);
         if (CustomNotification) {
-          return <CustomNotification {...notification} />;
+          return <CustomNotification key={notification.id} {...notification} />;
         }
 
         return (
-          <StyledNotification
-            variant={notification.variant}
+          <div
             key={notification.id}
-            horizontalDirection={horizontalDirection}
-            despawn={notification.despawning}
+            role="alert"
+            style={notificationElementStyles({
+              variant: notification.variant,
+            })}
           >
-            <NotificationTitle>{notification.title}</NotificationTitle>
+            <h2 style={notificationTitleStyles()}>{notification.title}</h2>
             {notification.subtitle && (
-              <NotificationInfo>{notification.subtitle}</NotificationInfo>
+              <small style={notificationSubtitleStyles()}>
+                {notification.subtitle}
+              </small>
             )}
-          </StyledNotification>
+          </div>
         );
       })}
-    </NotificationWrapper>
+    </div>
   );
 };
 

lib/util/styles.ts

@@ -0,0 +1,98 @@
+import { CSSProperties } from "react";
+import {
+  VerticalDirectionType,
+  HorizontalDirectionType,
+  NotificationVariant,
+} from "../NotificationContext";
+
+interface INotificationWrapper {
+  verticalDirection?: VerticalDirectionType;
+  horizontalDirection?: HorizontalDirectionType;
+}
+
+export const notificationWrapperStyles = ({
+  verticalDirection,
+  horizontalDirection,
+}: INotificationWrapper): CSSProperties => {
+  const verticalPositioner =
+    verticalDirection === "bottom"
+      ? { top: "initial", bottom: "0" }
+      : { bottom: "initial", top: "0" };
+  const horizontalPositioner =
+    horizontalDirection === "left"
+      ? { left: "0", right: "initial" }
+      : { left: "initial", right: "0" };
+
+  return {
+    position: "fixed",
+    zIndex: 999,
+    display: "flex",
+    padding: "1rem",
+    flexDirection: "column",
+    ...verticalPositioner,
+    ...horizontalPositioner,
+  };
+};
+
+interface INotificationElement {
+  variant?: NotificationVariant;
+}
+
+const calculateVariant = (
+  variant?: NotificationVariant
+): { backgroundColor: string; color: string } => {
+  const variantStyles = {
+    backgroundColor: "blue",
+    color: "#fff",
+  };
+
+  switch (variant) {
+    case "success":
+      variantStyles.backgroundColor = "green";
+      variantStyles.color = "#fff";
+      break;
+    case "warning":
+      variantStyles.backgroundColor = "orange";
+      variantStyles.color = "#222";
+      break;
+    case "danger":
+      variantStyles.backgroundColor = "red";
+      variantStyles.color = "#fff";
+      break;
+  }
+
+  return variantStyles;
+};
+
+export const notificationElementStyles = ({
+  variant,
+}: INotificationElement): CSSProperties => {
+  const colorVariants = calculateVariant(variant);
+
+  return {
+    boxShadow: "0 2px 2px rgba(0, 0, 0, 0.2)",
+    background: "#fff",
+    padding: "1rem",
+    fontFamily: "sans-serif",
+    borderRadius: "5px",
+    width: "20rem",
+    display: "flex",
+    flexDirection: "column",
+    transition: "all 0.1s ease-in-out",
+    marginBottom: "0.5rem",
+    ...colorVariants,
+  };
+};
+
+export const notificationTitleStyles = (): CSSProperties => {
+  return {
+    margin: 0,
+    fontSize: "1.2rem",
+  };
+};
+
+export const notificationSubtitleStyles = (): CSSProperties => {
+  return {
+    marginTop: "0.5rem",
+  };
+};

lib/util/uid.ts

@@ -0,0 +1,3 @@
+export default function uid() {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2);
+}

package.json

@@ -28,7 +28,6 @@
     "@types/react-dom": "^16.8.4",
     "@types/storybook__react": "^4.0.1",
     "@types/styled-components": "^5.1.0",
-    "@types/uuid": "^7.0.3",
     "awesome-typescript-loader": "^5.2.1",
     "jest": "^24.9.0",
     "jest-junit": "^7.0.0",
@@ -42,10 +41,7 @@
   },
   "peerDependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6",
-    "styled-components": "^5.1.0"
+    "react-dom": "^16.8.6"
   },
-  "dependencies": {
-    "uuid": "^8.0.0"
-  }
+  "dependencies": {}
 }