@redsift/popovers 9.2.3-patch → 9.2.3

package/src/components/toast-container/ToastContainer.stories.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+
+import { ToastContainer, useToast } from '.';
+import { Button, Flexbox } from '@redsift/design-system';
+
+export default {
+  title: 'Popovers/Toast/ToastContainer',
+  component: ToastContainer,
+};
+
+export const Simple = () => {
+  const { notify } = useToast();
+
+  return (
+    <>
+      <Flexbox>
+        <Button
+          onClick={() =>
+            notify({
+              content: 'This is a success',
+              variant: 'success',
+            })
+          }
+        >
+          Success
+        </Button>
+        <Button
+          onClick={() =>
+            notify({
+              title: 'This is a warning',
+              content: 'Cupcake ipsum dolor sit amet.',
+              variant: 'warning',
+            })
+          }
+        >
+          Warning
+        </Button>
+        <Button
+          onClick={() =>
+            notify({
+              title: 'This is an error',
+              content:
+                'Cupcake ipsum dolor sit amet. Cookie chocolate cake muffin chocolate bar powder cake chupa chups. Gummies chocolate cake cupcake chupa chups sesame snaps soufflé soufflé gingerbread blueie. Caramels chocolate bar soufflé sesame snaps tiramisu. Cookie muffin pie cake cupcake sweet.',
+              variant: 'error',
+            })
+          }
+        >
+          Error
+        </Button>
+        <Button
+          onClick={() =>
+            notify({
+              title: 'This is an info',
+              content:
+                'Cupcake ipsum dolor sit amet. Cookie chocolate cake muffin chocolate bar powder cake chupa chups.',
+              variant: 'info',
+            })
+          }
+        >
+          Info
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};
+
+export const AllVariants = () => {
+  const { notify, success, warning, error, info, loading } = useToast();
+
+  return (
+    <>
+      <Flexbox
+        flexDirection="row"
+        flexWrap="wrap"
+        justifyContent="center"
+        alignItems="flex-start"
+        marginTop="96px"
+      >
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Default',
+            })
+          }
+        >
+          Default
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            success({
+              content: 'Success',
+            })
+          }
+        >
+          Success
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            warning({
+              content: 'Warning',
+            })
+          }
+        >
+          Warning
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            error({
+              content: 'Error',
+            })
+          }
+        >
+          Error
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            info({
+              content: 'Info',
+            })
+          }
+        >
+          Info
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            loading({
+              content: 'Loading',
+            })
+          }
+        >
+          Loading
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};
+
+export const AllPlacements = () => {
+  const { notify } = useToast();
+
+  return (
+    <>
+      <Flexbox
+        flexDirection="row"
+        flexWrap="wrap"
+        justifyContent="center"
+        alignItems="flex-start"
+        marginTop="96px"
+      >
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Top-left',
+              placement: 'top-left',
+            })
+          }
+        >
+          Top-left
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Top-center',
+              placement: 'top-center',
+            })
+          }
+        >
+          Top-center
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Top-right',
+              placement: 'top-right',
+            })
+          }
+        >
+          Top-right
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Bottom-left',
+              placement: 'bottom-left',
+            })
+          }
+        >
+          Bottom-left
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Bottom-center',
+              placement: 'bottom-center',
+            })
+          }
+        >
+          Bottom-center
+        </Button>
+        <Button
+          variant="secondary"
+          onClick={() =>
+            notify({
+              content: 'Bottom-right',
+              placement: 'bottom-right',
+            })
+          }
+        >
+          Bottom-right
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};
+
+export const Dismiss = () => {
+  const toastId = React.useRef<number | string | null>(null);
+  const { notify, dismiss } = useToast();
+
+  return (
+    <>
+      <Flexbox>
+        <Button
+          onClick={() => {
+            toastId.current = notify({
+              content: 'Saved!',
+              autoClose: false,
+              closeButton: false,
+            });
+          }}
+        >
+          Notify
+        </Button>
+        <Button
+          onClick={() => {
+            if (toastId.current) {
+              dismiss(toastId.current);
+            }
+          }}
+        >
+          Dismiss
+        </Button>
+        <Button
+          onClick={() => {
+            dismiss();
+          }}
+        >
+          Dismiss all
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};
+
+export const Update = () => {
+  const toastId = React.useRef<number | string | null>(null);
+  const { notify, update } = useToast();
+
+  return (
+    <>
+      <Flexbox>
+        <Button
+          onClick={() => {
+            toastId.current = notify({
+              content: 'Saving...',
+              variant: 'loading',
+              autoClose: false,
+              closeButton: false,
+            });
+          }}
+        >
+          Notify
+        </Button>
+        <Button
+          onClick={() => {
+            if (toastId.current) {
+              update(toastId.current, {
+                content: 'Saved!',
+                autoClose: 5000,
+              });
+            }
+          }}
+        >
+          Update
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};
+
+export const WithPromise = () => {
+  const { promise } = useToast();
+
+  return (
+    <>
+      <Flexbox>
+        <Button
+          variant="secondary"
+          color="success"
+          onClick={() => {
+            const resolveAfter3Sec = new Promise((resolve) =>
+              setTimeout(resolve, 3000)
+            );
+            promise(resolveAfter3Sec, {
+              pending: { content: 'Promise is pending' },
+              success: { content: 'Promise resolved!' },
+              error: { content: 'Promise rejected!' },
+            });
+          }}
+        >
+          Successful promise
+        </Button>
+        <Button
+          variant="secondary"
+          color="error"
+          onClick={() => {
+            const failAfter3Sec = new Promise((_, reject) =>
+              setTimeout(reject, 3000)
+            );
+            promise(failAfter3Sec, {
+              pending: { content: 'Promise is pending' },
+              success: { content: 'Promise resolved!' },
+              error: { content: 'Promise rejected!' },
+            });
+          }}
+        >
+          Failing promise
+        </Button>
+      </Flexbox>
+      <ToastContainer />
+    </>
+  );
+};

package/src/components/toast-container/ToastContainer.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef, RefObject } from 'react';
+import { Slide } from 'react-toastify';
+
+import { Comp } from '@redsift/design-system';
+import { ReactToastify, StyledToastContainer } from './styles';
+import { ToastContainerProps } from './types';
+
+const COMPONENT_NAME = 'ToastContainer';
+const CLASSNAME = 'redsift-toast-container';
+const DEFAULT_PROPS: Partial<ToastContainerProps> = {
+  autoClose: 5000,
+  closeOnClick: false,
+  draggable: true,
+  pauseOnFocusLoss: true,
+  pauseOnHover: true,
+  placement: 'top-right',
+};
+
+/**
+ * The ToastContainer component.
+ */
+export const ToastContainer: Comp<ToastContainerProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const { placement, ...forwardedProps } = props;
+
+    return (
+      <ReactToastify>
+        <StyledToastContainer
+          {...forwardedProps}
+          className={ToastContainer.className}
+          closeButton={false}
+          icon={false}
+          newestOnTop={placement!.includes('bottom')}
+          position={placement}
+          ref={ref as RefObject<HTMLDivElement>}
+          theme="colored"
+          transition={Slide}
+        />
+      </ReactToastify>
+    );
+  });
+ToastContainer.className = CLASSNAME;
+ToastContainer.defaultProps = DEFAULT_PROPS;
+ToastContainer.displayName = COMPONENT_NAME;

package/src/components/toast-container/index.ts

@@ -0,0 +1,3 @@
+export * from './types';
+export * from './ToastContainer';
+export * from './useToast';