@sproutsocial/seeds-react-toast 1.0.0

package/src/Toast.tsx

@@ -0,0 +1,173 @@
+import type { PropsWithChildren, ReactNode, ComponentProps } from "react";
+import {
+  toast as toastifyToast,
+  cssTransition,
+  type ToastContent,
+} from "react-toastify";
+import Box from "@sproutsocial/seeds-react-box";
+import Icon, { type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import Text from "@sproutsocial/seeds-react-text";
+import { Container, ToastRoot } from "./styles";
+import type { TypeToastOptions, TypeToastTheme } from "./ToastTypes";
+import styled from "styled-components";
+
+export const toastDismiss: typeof toastifyToast.dismiss = (...input) =>
+  // @ts-ignore Not sure what this type is supposed to be
+  toastifyToast.dismiss(...input);
+export const toastIsActive: typeof toastifyToast.isActive = (...input) =>
+  toastifyToast.isActive(...input);
+export const toastUpdate: typeof toastifyToast.update = (...input) =>
+  toastifyToast.update(...input);
+
+const NoTransition = cssTransition({
+  enter: "SproutToast__none-in",
+  exit: "SproutToast__none-out",
+});
+const SproutZoomTransition = cssTransition({
+  enter: "SproutToast__zoom-in",
+  exit: "SproutToast__zoom-out",
+});
+
+export const ToastContainer = (
+  props: Partial<ComponentProps<typeof ToastRoot>>
+) => <ToastRoot {...props} />;
+
+const themeIcon: Record<TypeToastTheme, TypeIconName> = {
+  success: "circle-check-outline",
+  info: "circle-i-outline",
+  warning: "triangle-exclamation-outline",
+  error: "triangle-exclamation-outline",
+} as const;
+
+export function toast<TData = unknown>(
+  options: TypeToastOptions<TData>
+): ReturnType<typeof toastifyToast> {
+  const {
+    closeOnClick = true,
+    content,
+    onClose,
+    persist,
+    toastId: inputToastId,
+    useTransition = true,
+    position = "bottom-right",
+    autoClose = persist ? false : 6000,
+    transition = useTransition ? SproutZoomTransition : NoTransition,
+    ...rest
+  } = options;
+
+  let toastId = inputToastId;
+  if (!toastId && typeof content === "string") {
+    toastId = content;
+  }
+
+  const renderToast: ToastContent<TData> = (toastInput) => {
+    const renderedContent =
+      typeof content === "function" ? content(toastInput) : content;
+
+    if (options.theme === "custom") {
+      return renderedContent;
+    }
+
+    const theme = options.theme || "info";
+    const iconName = options.icon || themeIcon[theme];
+    const containerColor =
+      options.color ||
+      (
+        {
+          success: "container.border.success",
+          error: "container.border.error",
+          info: "container.border.info",
+          warning: "container.border.warning",
+        } as const
+      )[theme];
+    const iconColor =
+      options.color ||
+      (
+        {
+          success: "icon.success",
+          error: "icon.error",
+          info: "icon.info",
+          warning: "icon.warning",
+        } as const
+      )[theme];
+
+    return (
+      // TODO: if this closes when clicked, there should be a label saying "Click to close" that can be overridden
+      <ToastContentContainer
+        icon={<Icon name={iconName} color={iconColor} />}
+        close={<Icon name="x-outline" color="icon.base" aria-hidden />}
+        highlightColor={containerColor}
+      >
+        {renderedContent}
+      </ToastContentContainer>
+    );
+  };
+
+  const toastOptions = {
+    autoClose,
+    closeOnClick,
+    onClose,
+    toastId: toastId || undefined,
+    transition,
+    position,
+    ...rest,
+    icon: undefined,
+    color: undefined,
+  } as const;
+
+  if (toastId && toastIsActive(toastId)) {
+    toastifyToast.update<TData>(toastId, {
+      ...toastOptions,
+      render: renderToast,
+    });
+  } else {
+    toastId = toastifyToast<TData>(renderToast, toastOptions);
+  }
+
+  return toastId;
+}
+
+export default ToastContainer;
+
+export const ToastContentContainer = ({
+  children,
+  icon,
+  close,
+  highlightColor,
+}: PropsWithChildren<{
+  /**
+   * A ReactNode in the icon slot
+   */
+  icon: ReactNode;
+  /**
+   * A ReactNode in the close button slot
+   */
+  close: ReactNode;
+  highlightColor?: ComponentProps<typeof Box>["bg"];
+}>) => {
+  return (
+    <Container data-qa-toast="">
+      {highlightColor ? (
+        <ToastHighlight bg={highlightColor} aria-hidden />
+      ) : null}
+
+      <Box css="line-height: 1;">{icon}</Box>
+
+      <Box flex={1}>
+        <Text as="div" color="text.body" data-qa-toast-content="">
+          {children}
+        </Text>
+      </Box>
+
+      <Box css="line-height: 1;">{close}</Box>
+    </Container>
+  );
+};
+
+export const ToastHighlight = styled(Box)<ComponentProps<typeof Box>>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 2px;
+`;

package/src/ToastTypes.ts

@@ -0,0 +1,38 @@
+import type { ComponentProps } from "react";
+import { type Icon, type TypeIconName } from "@sproutsocial/seeds-react-icon";
+import type { ToastContent, ToastOptions } from "react-toastify";
+
+export type TypeToastTheme = "info" | "success" | "warning" | "error";
+
+interface BaseToastOptions<TData>
+  extends Omit<ToastOptions<TData>, "closeButton" | "icon" | "type"> {
+  theme?: TypeToastTheme | "custom";
+  content: ToastContent<TData>;
+  persist?: boolean;
+  useTransition?: boolean;
+}
+
+interface ThemedToastOptions<TData> extends BaseToastOptions<TData> {
+  /**
+   * One of `info`, `success`, `warning`, or `error`.
+   */
+  theme?: TypeToastTheme;
+  /**
+   * @deprecated Use `custom` theme instead.
+   */
+  color?: ComponentProps<typeof Icon>["color"];
+  /**
+   * @deprecated Use `custom` theme instead.
+   */
+  icon?: TypeIconName;
+}
+interface CustomToastOptions<TData> extends BaseToastOptions<TData> {
+  /**
+   * If you need to break out of the supported styles you can use the `custom` theme. You can use `ToastContentContainer` with `Icon` and `ToastHighlight` to build your custom toast.
+   */
+  theme: "custom";
+}
+
+export type TypeToastOptions<TData> =
+  | ThemedToastOptions<TData>
+  | CustomToastOptions<TData>;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./Toast";
+export * from "./ToastTypes";
+export { TOAST_Z_INDEX } from "./styles";

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,115 @@
+import styled from "styled-components";
+import type { ComponentProps } from "react";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import "react-toastify/dist/ReactToastify.css";
+import Box from "@sproutsocial/seeds-react-box";
+import { ToastContainer } from "react-toastify";
+
+export const TOAST_Z_INDEX = 9999;
+
+export const Container = styled(Box)<ComponentProps<typeof Box>>`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.space[350]};
+  font-family: ${({ theme }) => theme.fontFamily};
+  ${({ theme }) => theme.typography[200]}
+  position: relative;
+  padding: ${({ theme }) => theme.space[350]};
+`;
+
+export const ToastRoot = styled(ToastContainer).attrs({
+  toastClassName: "Toastify-toast-overrides",
+  hideProgressBar: true,
+  closeButton: false,
+  icon: false,
+  position: "bottom-right",
+})`
+  --toastify-z-index: ${TOAST_Z_INDEX};
+  --toastify-toast-offset: ${({ theme }) => theme.space[400]};
+  --toastify-toast-width: 360px;
+  --toastify-toast-min-height: 48px;
+  --toastify-toast-max-height: 70vh;
+  --toastify-toast-bd-radius: ${({ theme }) => theme.radii[400]};
+  --toastify-toast-background: ${({ theme }) =>
+    theme.colors.container.background.base};
+  /* there's margin-bottom on the last toast so we can remove this */
+  --toastify-toast-bottom: 0;
+
+  padding: 0;
+
+  .Toastify-toast-overrides {
+    background: ${({ theme }) => theme.colors.container.background.base};
+    color: ${({ theme }) => theme.colors.text.body};
+    box-shadow: ${({ theme }) => theme.shadows.low};
+    padding: 0;
+    margin-bottom: var(--toastify-toast-offset);
+  }
+
+  .Toastify__toast-body {
+    padding: 0;
+    margin: 0;
+  }
+
+  /* Override React Toastify's mobile width styles */
+  @media only screen and (max-width: 480px) {
+    .Toastify-container-overrides {
+      min-width: initial !important;
+    }
+  }
+
+  /* Zoom animation */
+  @keyframes SproutToast__zoom-in {
+    from {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3);
+    }
+    50% {
+      opacity: 1;
+    }
+  }
+  @keyframes SproutToast__zoom-out {
+    from {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0;
+      transform: scale3d(0.3, 0.3, 0.3) translate3d(0, var(--y), 0);
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  .SproutToast__zoom-in {
+    animation: SproutToast__zoom-in ${({ theme }) => theme.duration.medium}
+      ${({ theme }) => theme.easing.ease_out} both;
+  }
+  .SproutToast__zoom-out {
+    animation: SproutToast__zoom-out ${({ theme }) => theme.duration.slow}
+      ${({ theme }) => theme.easing.ease_in} both;
+  }
+
+  /* No animation (it's still necessary to define classes for no animation to work properly) */
+  @keyframes SproutToast__none-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+  @keyframes SproutToast__none-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+  .SproutToast__none-in {
+    animation: SproutToast__none-in 0s both;
+  }
+  .SproutToast__none-out {
+    animation: SproutToast__none-out 0s both;
+  }
+`;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage", "src/Toast.stories.tsx"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));