@dt-dds/react-toast 1.0.0-beta.100

package/dist/index.mjs

@@ -0,0 +1,391 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __commonJS = (cb, mod) => function __require2() {
+  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// ../box/dist/index.js
+var require_dist = __commonJS({
+  "../box/dist/index.js"(exports, module) {
+    "use strict";
+    var __create2 = Object.create;
+    var __defProp2 = Object.defineProperty;
+    var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
+    var __getOwnPropNames2 = Object.getOwnPropertyNames;
+    var __getProtoOf2 = Object.getPrototypeOf;
+    var __hasOwnProp2 = Object.prototype.hasOwnProperty;
+    var __export = (target, all) => {
+      for (var name in all)
+        __defProp2(target, name, { get: all[name], enumerable: true });
+    };
+    var __copyProps2 = (to, from, except, desc) => {
+      if (from && typeof from === "object" || typeof from === "function") {
+        for (let key of __getOwnPropNames2(from))
+          if (!__hasOwnProp2.call(to, key) && key !== except)
+            __defProp2(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc2(from, key)) || desc.enumerable });
+      }
+      return to;
+    };
+    var __toESM2 = (mod, isNodeMode, target) => (target = mod != null ? __create2(__getProtoOf2(mod)) : {}, __copyProps2(
+      // If the importer is in node compatibility mode or this is not an ESM
+      // file that has been converted to a CommonJS file using a Babel-
+      // compatible transform (i.e. "__esModule" has not been set), then set
+      // "default" to the CommonJS "module.exports" for node compatibility.
+      isNodeMode || !mod || !mod.__esModule ? __defProp2(target, "default", { value: mod, enumerable: true }) : target,
+      mod
+    ));
+    var __toCommonJS = (mod) => __copyProps2(__defProp2({}, "__esModule", { value: true }), mod);
+    var index_exports = {};
+    __export(index_exports, {
+      Box: () => Box2
+    });
+    module.exports = __toCommonJS(index_exports);
+    var import_styled2 = __toESM2(__require("@emotion/styled"));
+    var BoxStyled = import_styled2.default.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+    var import_jsx_runtime3 = __require("react/jsx-runtime");
+    var Box2 = ({
+      dataTestId,
+      children,
+      element = "div",
+      style
+    }) => {
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(BoxStyled, { as: element, "data-testid": dataTestId, style, children });
+    };
+  }
+});
+
+// src/Toast.tsx
+var import_react_box = __toESM(require_dist());
+import { Icon } from "@dt-dds/react-icon";
+import { Typography } from "@dt-dds/react-typography";
+import { useTheme } from "@emotion/react";
+
+// src/constants/enums.ts
+var ToastPosition = /* @__PURE__ */ ((ToastPosition2) => {
+  ToastPosition2["TopLeft"] = "top-left";
+  ToastPosition2["TopCenter"] = "top-center";
+  ToastPosition2["TopRight"] = "top-right";
+  ToastPosition2["BottomLeft"] = "bottom-left";
+  ToastPosition2["BottomCenter"] = "bottom-center";
+  ToastPosition2["BottomRight"] = "bottom-right";
+  return ToastPosition2;
+})(ToastPosition || {});
+var ToastType = /* @__PURE__ */ ((ToastType2) => {
+  ToastType2["Success"] = "success";
+  ToastType2["Error"] = "error";
+  ToastType2["Info"] = "informative";
+  ToastType2["Warning"] = "warning";
+  return ToastType2;
+})(ToastType || {});
+
+// src/Toast.styled.ts
+import { keyframes } from "@emotion/react";
+import styled from "@emotion/styled";
+var fadeIn = keyframes`
+  from { opacity: 0; }
+  to   { opacity: 1; }
+`;
+var ToastStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  animation: ${fadeIn} 0.75s ease-in;
+  transition: all 0.75s ease-in-out;
+  overflow: hidden;
+  ${({ theme, isVisible, type }) => `
+    border: 1px solid ${theme.palette[type].default};
+    border-left: 6px solid ${theme.palette[type].default};
+    background-color: ${theme.palette[type].light};
+    opacity: ${isVisible ? 1 : 0};
+    border-radius: ${theme.shape.toast};
+    padding: ${theme.spacing.spacing_50} ${theme.spacing.spacing_50} ${theme.spacing.spacing_50} ${theme.spacing.spacing_30};
+  `}
+`;
+var ToastMessageStyled = styled.div`
+  ${({ theme, type }) => `
+    ${theme.fontStyles.bodyMdRegular};
+    color: ${theme.palette[type].dark};
+    overflow: hidden;
+    word-break: break-word;
+    hyphens: auto;
+    display: -webkit-box;
+    -webkit-line-clamp: 6;
+    -webkit-box-orient: vertical;
+    margin-inline: calc(24px + ${theme.spacing.spacing_30})
+  `}
+`;
+var ToastButtonCloseStyled = styled.button`
+  ${({ theme, toastType }) => `
+    color: ${theme.palette[toastType].dark};
+    border: 0;
+    cursor: pointer;
+    background: transparent;
+    align-self: flex-start;
+    margin-left: auto;
+    font-size: 0;
+    line-height: 0;
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.primary.default};
+      outline-offset: 1px;
+    }
+
+    &:hover {
+      background-color: ${theme.palette[toastType].medium};
+    }
+    
+  `}
+`;
+var ActionsContainer = styled.div`
+  ${({ theme, type }) => `
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: ${theme.spacing.spacing_20};
+    margin-top: ${theme.spacing.spacing_30};
+
+    button {
+      color: ${theme.palette[type].dark};
+      
+      &:hover {
+        background-color: ${theme.palette[type].medium};
+        color: ${theme.palette[type].dark};
+      }
+    }
+`}
+`;
+
+// src/Toast.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var ToastIcons = {
+  ["success" /* Success */]: "check_circle",
+  ["error" /* Error */]: "error",
+  ["informative" /* Info */]: "info",
+  ["warning" /* Warning */]: "warning"
+};
+var Toast = ({
+  id,
+  dataTestId,
+  title,
+  message,
+  onClose,
+  type,
+  isVisible = true,
+  dismissible = true,
+  children
+}) => {
+  const dataTest = dataTestId != null ? dataTestId : `toast-${id}`;
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs(
+    ToastStyled,
+    {
+      "data-testid": dataTest,
+      isVisible,
+      type,
+      children: [
+        /* @__PURE__ */ jsxs(
+          import_react_box.Box,
+          {
+            style: {
+              alignSelf: "start",
+              flexDirection: "row",
+              width: "100%",
+              gap: theme.spacing.spacing_30
+            },
+            children: [
+              /* @__PURE__ */ jsx(Icon, { code: ToastIcons[type], color: theme.palette[type].dark }),
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  color: `${type}.dark`,
+                  element: "span",
+                  fontStyles: "bodyLgBold",
+                  children: title
+                }
+              ),
+              dismissible ? /* @__PURE__ */ jsx(
+                ToastButtonCloseStyled,
+                {
+                  "data-testId": "close-button",
+                  onClick: onClose,
+                  toastType: type,
+                  children: /* @__PURE__ */ jsx(Icon, { code: "close", color: theme.palette[type].dark })
+                }
+              ) : null
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(ToastMessageStyled, { type, children: message }),
+        Boolean(children) ? /* @__PURE__ */ jsx(ActionsContainer, { type, children }) : null
+      ]
+    },
+    id
+  );
+};
+var Toast_default = Toast;
+
+// src/Toaster.tsx
+import { Button } from "@dt-dds/react-button";
+import { TOAST_Z_INDEX, useMedia } from "@dt-dds/react-core";
+import { useTheme as useTheme2 } from "@emotion/react";
+import React from "react";
+import {
+  toast,
+  Toaster as ToastProvider
+} from "react-hot-toast";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TOAST_DEFAULT_DURATION = 4e3;
+var TOAST_ERROR_DURATION = Infinity;
+var smallPosition = "bottom-center" /* BottomCenter */;
+var defaultPosition = "bottom-right" /* BottomRight */;
+var dismissToast = (id) => {
+  toast.dismiss(id);
+};
+var processChildren = (children) => {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return child;
+    }
+    if (child.type === Button) {
+      return React.cloneElement(child, __spreadProps(__spreadValues({}, child.props), {
+        size: "small",
+        variant: "text"
+      }));
+    }
+    if (child.props.children) {
+      return React.cloneElement(
+        child,
+        __spreadValues({}, child.props),
+        processChildren(child.props.children)
+      );
+    }
+    return child;
+  });
+};
+var emitToast = (_a) => {
+  var _b = _a, {
+    type,
+    title,
+    message,
+    children,
+    dismissible
+  } = _b, props = __objRest(_b, [
+    "type",
+    "title",
+    "message",
+    "children",
+    "dismissible"
+  ]);
+  const duration = type === "error" /* Error */ ? TOAST_ERROR_DURATION : TOAST_DEFAULT_DURATION;
+  toast.custom(
+    (t) => {
+      return /* @__PURE__ */ jsx2(
+        Toast_default,
+        {
+          dismissible,
+          id: t.id,
+          isVisible: t.visible,
+          message,
+          onClose: () => toast.dismiss(t.id),
+          title,
+          type,
+          children: processChildren(children)
+        }
+      );
+    },
+    __spreadValues({
+      duration
+    }, props)
+  );
+};
+var Toaster = (_a) => {
+  var _b = _a, { gutter = 8 } = _b, props = __objRest(_b, ["gutter"]);
+  const theme = useTheme2();
+  const small = useMedia(`(max-width: ${theme.breakpoints.mq2}px)`);
+  const position = small ? smallPosition : defaultPosition;
+  const margin = small ? 8 : 16;
+  return /* @__PURE__ */ jsx2(
+    ToastProvider,
+    __spreadProps(__spreadValues({
+      gutter,
+      position
+    }, props), {
+      containerStyle: __spreadProps(__spreadValues({
+        bottom: 16,
+        right: margin,
+        top: margin,
+        left: margin
+      }, props.containerStyle), {
+        zIndex: TOAST_Z_INDEX
+      })
+    })
+  );
+};
+var Toaster_default = Toaster;
+export {
+  Toast_default as Toast,
+  ToastPosition,
+  ToastType,
+  Toaster_default as Toaster,
+  dismissToast,
+  emitToast
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@dt-dds/react-toast",
+  "version": "1.0.0-beta.100",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-button": "1.0.0-beta.83",
+    "@dt-dds/react-core": "1.0.0-beta.51",
+    "@dt-dds/react-icon": "1.0.0-beta.54",
+    "@dt-dds/react-typography": "1.0.0-beta.42",
+    "@dt-dds/themes": "1.0.0-beta.9",
+    "react-hot-toast": "^2.3.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^8.5.0",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}