@blerp/design 1.3.17 → 1.4.2

package/dist/esm/PurchaseModals/CheckoutModal.js

@@ -30,4 +30,4 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-export default NeedToReplace;
+export { NeedToReplace as default };

package/dist/esm/PurchaseModals/PremiumBlerpCheckoutModal.js

@@ -30,4 +30,4 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-export default NeedToReplace;
+export { NeedToReplace as default };

package/dist/esm/PurchaseModals/PremiumCollectionCheckoutModal.js

@@ -30,4 +30,4 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-export default NeedToReplace;
+export { NeedToReplace as default };

package/dist/esm/PurchaseModals/PremiumSubscriptionCheckoutModal.js

@@ -30,4 +30,4 @@ const NeedToReplace = props => {
   }, "Need to replace to remove payment dependencies");
 };
 
-export default NeedToReplace;
+export { NeedToReplace as default };

package/dist/esm/ReactionButtons.js

@@ -1,10 +1,7 @@
-import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import React from 'react';
-import styled from 'styled-components';
 import { Grid, Tooltip } from './index.js';
+import { useBlerpTheme } from './Theme.js';
 
-var _templateObject;
-const ReactionButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    width: 30px;\n    height: 30px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding: 8px;\n    transition: 0.2s;\n    margin-right: 0;\n    cursor: pointer;\n    background-color: ", ";\n\n    &:hover {\n        background-color: ", ";\n    }\n"])), props => props.active ? props.theme.colors.ibisRed : props.theme.colors.grey5, props => props.theme.colors.ibisRed);
 const reactionIconUrls = {
   FUNNY: "https://cdn.blerp.com/blerp_products/Icons/Funny%403x.svg",
   HAPPY: "https://cdn.blerp.com/blerp_products/Icons/Happy%403x.svg",
@@ -21,6 +18,8 @@ const ReactionButtons = _ref => {
     bite,
     handleClick
   } = _ref;
+  const theme = useBlerpTheme();
+  const [hoveredReaction, setHoveredReaction] = React.useState(null);
   return /*#__PURE__*/React.createElement(Grid, {
     display: "grid",
     gridTemplateColumns: "repeat(4, 1fr)",
@@ -28,8 +27,10 @@ const ReactionButtons = _ref => {
     marginTop: "16px",
     gap: 1
   }, Object.keys(reactionIconUrls).map(reaction => {
-    var _bite$userReactions, _bite$userReactions$r;
+    var _bite$userReactions, _bite$userReactions$r, _theme$colors, _theme$colors2;
 
+    const isActive = bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction);
+    const isHovered = hoveredReaction === reaction;
     return /*#__PURE__*/React.createElement(Grid, {
       key: "".concat(reaction, "-button"),
       gridColumn: "span 1",
@@ -37,8 +38,22 @@ const ReactionButtons = _ref => {
       justifyContent: "center"
     }, /*#__PURE__*/React.createElement(Tooltip, {
       title: reaction
-    }, /*#__PURE__*/React.createElement(ReactionButton, {
-      active: bite === null || bite === void 0 ? void 0 : (_bite$userReactions = bite.userReactions) === null || _bite$userReactions === void 0 ? void 0 : (_bite$userReactions$r = _bite$userReactions.reactions) === null || _bite$userReactions$r === void 0 ? void 0 : _bite$userReactions$r.includes(reaction),
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        borderRadius: "50%",
+        width: "30px",
+        height: "30px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: "8px",
+        transition: "0.2s",
+        marginRight: 0,
+        cursor: "pointer",
+        backgroundColor: isActive || isHovered ? (theme === null || theme === void 0 ? void 0 : (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.ibisRed) || "#e74c3c" : (theme === null || theme === void 0 ? void 0 : (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.grey5) || "#bbb"
+      },
+      onMouseEnter: () => setHoveredReaction(reaction),
+      onMouseLeave: () => setHoveredReaction(null),
       onClick: () => {
         var _bite$userReactions2, _bite$userReactions2$;
 
@@ -54,4 +69,4 @@ const ReactionButtons = _ref => {
   }));
 };
 
-export default ReactionButtons;
+export { ReactionButtons as default };

package/dist/esm/SnackbarContextProvider.js

@@ -1,27 +1,9 @@
-import _extends from '@babel/runtime/helpers/extends';
-import React, { useState } from 'react';
-import Slide from '@mui/material/Slide';
-import Fade from '@mui/material/Fade';
-import { Snackbar, Alert } from './index.js';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React, { useState, useCallback } from 'react';
 
-/*
-snackbarContext.triggerSnackbar({
-  message: `Added to ${collection.title}`,
-  severity: "success",
-  actionButton: (
-    <Button
-      color="inherit"
-      variant="text"
-      size="small"
-      onClick={() => {
-        globalContext.setActiveBoard(collection);
-      }}>
-      View
-    </Button>
-  ),
-});
-*/
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const SnackbarContext = /*#__PURE__*/React.createContext({
   snackbarValues: {
     open: false,
@@ -33,31 +15,130 @@ const SnackbarContext = /*#__PURE__*/React.createContext({
     slideDirection: "up",
     transitionType: "slide",
     severity: "success",
-    actionButton: /*#__PURE__*/React.createElement(React.Fragment, null),
-    autoHideDuration: 5000,
-    sx: null
+    actionButton: null,
+    autoHideDuration: 5000
   },
   triggerSnackbar: () => null
 });
+const severityStyles = {
+  success: {
+    background: "#4caf50",
+    color: "#fff"
+  },
+  error: {
+    background: "#f44336",
+    color: "#fff"
+  },
+  warning: {
+    background: "#ff9800",
+    color: "#fff"
+  },
+  info: {
+    background: "#2196f3",
+    color: "#fff"
+  }
+};
+const severityIcons = {
+  success: /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+  })),
+  error: /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+  })),
+  warning: /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"
+  })),
+  info: /*#__PURE__*/React.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"
+  }))
+};
+
+const getPositionStyles = position => {
+  const styles = {
+    position: "fixed",
+    zIndex: 9999,
+    display: "flex",
+    justifyContent: "center"
+  };
+
+  if (position.vertical === "top") {
+    styles.top = "24px";
+  } else {
+    styles.bottom = "24px";
+  }
 
-const SnackbarProvider = props => {
+  if (position.horizontal === "left") {
+    styles.left = "24px";
+  } else if (position.horizontal === "right") {
+    styles.right = "24px";
+  } else {
+    styles.left = "50%";
+    styles.transform = "translateX(-50%)";
+  }
+
+  return styles;
+};
+
+const getAnimationKeyframes = (direction, transitionType) => {
+  if (transitionType === "fade") {
+    return "\n      @keyframes snackbarEnter {\n        from { opacity: 0; }\n        to { opacity: 1; }\n      }\n      @keyframes snackbarExit {\n        from { opacity: 1; }\n        to { opacity: 0; }\n      }\n    ";
+  }
+
+  const translations = {
+    up: "translateY(100%)",
+    down: "translateY(-100%)",
+    left: "translateX(100%)",
+    right: "translateX(-100%)"
+  };
+  return "\n    @keyframes snackbarEnter {\n      from { \n        transform: ".concat(translations[direction], ";\n        opacity: 0;\n      }\n      to { \n        transform: translateY(0) translateX(0);\n        opacity: 1;\n      }\n    }\n    @keyframes snackbarExit {\n      from { \n        transform: translateY(0) translateX(0);\n        opacity: 1;\n      }\n      to { \n        transform: ").concat(translations[direction], ";\n        opacity: 0;\n      }\n    }\n  ");
+};
+
+const SnackbarProvider = _ref => {
+  let {
+    children
+  } = _ref;
   const [open, setOpen] = useState(false);
+  const [exiting, setExiting] = useState(false);
   const [snackbarValues, setSnackbarValues] = useState({
     message: "Set a message",
     position: {
       vertical: "bottom",
       horizontal: "center"
     },
-    color: "grey8",
     transitionType: "slide",
     slideDirection: "up",
     severity: "success",
-    actionButton: /*#__PURE__*/React.createElement(React.Fragment, null),
-    autoHideDuration: 5000,
-    sx: null
+    actionButton: null,
+    autoHideDuration: 5000
   });
-
-  const triggerSnackbar = _ref => {
+  const handleClose = useCallback(() => {
+    setExiting(true);
+    setTimeout(() => {
+      setOpen(false);
+      setExiting(false);
+    }, 225);
+  }, []);
+  const triggerSnackbar = useCallback(_ref2 => {
     let {
       message = "Set a message",
       position = {
@@ -67,93 +148,98 @@ const SnackbarProvider = props => {
       slideDirection = "up",
       transitionType = "slide",
       severity = "success",
-      color,
-      actionButton = /*#__PURE__*/React.createElement(React.Fragment, null),
-      autoHideDuration = 5000,
-      sx
-    } = _ref;
-
-    if (!color) {
-      switch (severity) {
-        case "success":
-          color = "grey3"; // figure out how to fix seafoam text
-
-          break;
+      actionButton = null,
+      autoHideDuration = 5000
+    } = _ref2;
 
-        case "error":
-          color = "ibisRed";
-          break;
-
-        default:
-          color = "notBlack";
-          break;
-      }
-    }
+    // Close any existing snackbar first
+    if (open) {
+      setExiting(true);
+      setTimeout(() => {
+        setExiting(false);
+        setOpen(true);
+        setSnackbarValues({
+          message,
+          position,
+          transitionType,
+          slideDirection,
+          severity,
+          actionButton,
+          autoHideDuration
+        });
+      }, 225);
+    } else {
+      setOpen(true);
+      setSnackbarValues({
+        message,
+        position,
+        transitionType,
+        slideDirection,
+        severity,
+        actionButton,
+        autoHideDuration
+      });
+    } // Auto-hide
 
-    setOpen(true);
-    setSnackbarValues({
-      message,
-      position,
-      color,
-      transitionType,
-      slideDirection,
-      severity,
-      actionButton,
-      autoHideDuration,
-      sx
-    });
-    setTimeout(() => {
-      setOpen(false);
-    }, autoHideDuration);
-  };
 
+    setTimeout(handleClose, autoHideDuration);
+  }, [open, handleClose]);
+  const positionStyles = getPositionStyles(snackbarValues.position);
+  const keyframes = getAnimationKeyframes(snackbarValues.slideDirection, snackbarValues.transitionType);
   return /*#__PURE__*/React.createElement(SnackbarContext.Provider, {
     value: {
-      snackbarValues: snackbarValues,
-      setSnackbarValues: setSnackbarValues,
+      snackbarValues,
+      setSnackbarValues,
       triggerSnackbar: props => {
-        // TODO: figure out why setTimeout is needed to show every time
-        setTimeout(() => {
-          triggerSnackbar(props);
-        });
+        setTimeout(() => triggerSnackbar(props), 0);
       }
     }
-  }, /*#__PURE__*/React.createElement(Snackbar, {
-    anchorOrigin: { ...snackbarValues.position
-    },
-    autoHideDuration: snackbarValues.autoHideDuration,
-    open: open,
-    sx: {
-      minWidth: "30%",
-      ...snackbarValues.sx
-    },
-    TransitionComponent: props => {
-      if (snackbarValues.transitionType === "fade") {
-        return /*#__PURE__*/React.createElement(Fade, _extends({}, props, {
-          direction: snackbarValues.slideDirection,
-          unmountOnExit: true
-        }));
-      } else {
-        return /*#__PURE__*/React.createElement(Slide, _extends({}, props, {
-          direction: snackbarValues.slideDirection,
-          unmountOnExit: true
-        }));
-      }
-    },
-    onClose: () => setOpen(false),
-    key: "snackbar-toast"
-  }, /*#__PURE__*/React.createElement(Alert, {
-    severity: snackbarValues.severity,
-    variant: "filled",
-    color: snackbarValues.color,
-    action: snackbarValues.actionButton,
-    sx: {
-      width: "100%",
-      "& svg": {
-        color: "inherit"
-      }
+  }, open && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, keyframes), /*#__PURE__*/React.createElement("div", {
+    style: positionStyles
+  }, /*#__PURE__*/React.createElement("div", {
+    role: "alert",
+    style: _objectSpread({
+      display: "flex",
+      alignItems: "center",
+      gap: "12px",
+      padding: "12px 16px",
+      borderRadius: "8px",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      minWidth: "280px",
+      maxWidth: "560px",
+      animation: "".concat(exiting ? "snackbarExit" : "snackbarEnter", " 225ms cubic-bezier(0.4, 0, 0.2, 1)")
+    }, severityStyles[snackbarValues.severity])
+  }, /*#__PURE__*/React.createElement("span", {
+    style: {
+      display: "flex",
+      flexShrink: 0
     }
-  }, snackbarValues.message)), props.children);
+  }, severityIcons[snackbarValues.severity]), /*#__PURE__*/React.createElement("span", {
+    style: {
+      flex: 1,
+      fontSize: "14px",
+      fontWeight: 500
+    }
+  }, snackbarValues.message), snackbarValues.actionButton, /*#__PURE__*/React.createElement("button", {
+    onClick: handleClose,
+    style: {
+      background: "transparent",
+      border: "none",
+      color: "inherit",
+      cursor: "pointer",
+      padding: "4px",
+      display: "flex",
+      opacity: 0.7
+    },
+    "aria-label": "Close"
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+  })))))), children);
 };
 
 export { SnackbarContext, SnackbarProvider };