@redsift/popovers 8.0.0 → 8.0.1

package/src/components/toast/Toast.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, RefObject } from 'react';
+import classNames from 'classnames';
+
+import { useLocalizedStringFormatter } from 'react-aria';
+import intlMessages from './intl';
+
+import {
+  mdiAlert,
+  mdiAlertCircle,
+  mdiCheckCircle,
+  mdiClose,
+  mdiInformation,
+} from '@redsift/icons';
+import {
+  ColorPalette,
+  Comp,
+  Icon,
+  Heading,
+  Flexbox,
+  Spinner,
+  isComponent,
+  ButtonColor,
+  IconButton,
+} from '@redsift/design-system';
+import { StyledToast } from './styles';
+import { ToastProps, ToastVariant } from './types';
+
+const COMPONENT_NAME = 'Toast';
+const CLASSNAME = 'redsift-toast';
+const DEFAULT_PROPS: Partial<ToastProps> = {
+  variant: 'info',
+  closeButton: true,
+};
+
+const getVariant = (variant: ToastVariant) => {
+  switch (variant) {
+    case ToastVariant.info:
+    default:
+      return <Icon icon={mdiInformation} color={ColorPalette.info} />;
+    case ToastVariant.error:
+      return <Icon icon={mdiAlertCircle} color={ColorPalette.error} />;
+    case ToastVariant.success:
+      return <Icon icon={mdiCheckCircle} color={ColorPalette.success} />;
+    case ToastVariant.warning:
+      return <Icon icon={mdiAlert} color={ColorPalette.warning} />;
+    case ToastVariant.loading:
+      return <Spinner size="small" />;
+  }
+};
+
+/**
+ * The Toast component.
+ */
+export const Toast: Comp<
+  ToastProps & { closeToast?: () => void },
+  HTMLDivElement
+> = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    closeToast,
+    closeButton,
+    title,
+    variant,
+    ...forwardedProps
+  } = props;
+
+  const stringFormatter = useLocalizedStringFormatter(intlMessages);
+
+  const icon = getVariant(variant!);
+
+  return (
+    <StyledToast
+      {...forwardedProps}
+      className={classNames(Toast.className, className)}
+      ref={ref as RefObject<HTMLDivElement>}
+      $hasTitle={Boolean(title)}
+      $variant={variant}
+    >
+      <Flexbox
+        className={`${Toast.className}__header`}
+        justifyContent="space-between"
+      >
+        <Flexbox justifyContent="space-between" flexDirection="column" gap="0">
+          <Flexbox
+            className={`${Toast.className}-header__title`}
+            gap="14px"
+            alignItems="flex-start"
+          >
+            {icon}
+            {title ? <Heading as="h5">{title}</Heading> : null}
+          </Flexbox>
+
+          {children ? (
+            <div className={`${Toast.className}__content`}>{children}</div>
+          ) : null}
+        </Flexbox>
+
+        {closeButton === true ? (
+          <IconButton
+            aria-label={stringFormatter.format('close')}
+            className={`${Toast.className}-header__icon-button`}
+            icon={mdiClose}
+            onClick={closeToast}
+          />
+        ) : isComponent('Button')(closeButton) ||
+          isComponent('IconButton')(closeButton) ? (
+          React.cloneElement(closeButton, {
+            color: variant === 'loading' ? 'default' : (variant as ButtonColor),
+            onClick: () => {
+              closeButton.props.onClick?.();
+              closeToast?.();
+            },
+          })
+        ) : null}
+      </Flexbox>
+    </StyledToast>
+  );
+});
+Toast.className = CLASSNAME;
+Toast.defaultProps = DEFAULT_PROPS;
+Toast.displayName = COMPONENT_NAME;

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './Toast';

package/src/components/toast/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/src/components/toast/intl/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

package/src/components/toast/intl/index.ts

@@ -0,0 +1,7 @@
+import enUS from './en-US.json';
+import frFR from './fr-FR.json';
+
+export default {
+  'en-US': enUS,
+  'fr-FR': frFR,
+};

package/src/components/toast/styles.ts

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '@redsift/design-system';
+import { StyledToastProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledToast = styled.div<StyledToastProps>`
+  ${baseStyling}
+
+  padding: 16px;
+  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px rgb(0 0 0 / 14%),
+    0px 1px 10px rgb(0 0 0 / 12%);
+
+  ${({ $hasTitle, $variant }) => css`
+    background-color: ${$variant === 'loading'
+      ? 'var(--redsift-color-neutral-white)'
+      : `var(--redsift-color-${$variant}-hover)`};
+
+    .redsift-toast__header {
+      h5 {
+        line-height: 26px;
+      }
+    }
+
+    .redsift-toast-header__icon-button {
+      padding: 0px;
+      .redsift-icon {
+        color: var(--redsift-color-neutral-black);
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--redsift-color-${$variant}-active);
+      }
+    }
+
+    .redsift-toast__content {
+      margin-top: ${$hasTitle ? '8px' : '-24px'};
+      margin-left: 38px;
+    }
+  `}
+`;

package/src/components/toast/types.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+import { ValueOf, SizingProps, SpacingProps } from '@redsift/design-system';
+
+/**
+ * Component variant.
+ */
+export const ToastVariant = {
+  success: 'success',
+  error: 'error',
+  warning: 'warning',
+  info: 'info',
+  loading: 'loading',
+} as const;
+export type ToastVariant = ValueOf<typeof ToastVariant>;
+
+export const ToastPlacement = {
+  'top-right': 'top-right',
+  'top-center': 'top-center',
+  'top-left': 'top-left',
+  'bottom-right': 'bottom-right',
+  'bottom-center': 'bottom-center',
+  'bottom-left': 'bottom-left',
+} as const;
+export type ToastPlacement = ValueOf<typeof ToastPlacement>;
+
+/**
+ * Component props.
+ */
+export interface ToastProps
+  extends Omit<ComponentProps<'div'>, 'id' | 'style'>,
+    SpacingProps,
+    SizingProps {
+  /** Whether the component has a close button or not. */
+  closeButton?: boolean | ReactNode;
+  /** Title. */
+  title?: string;
+  /** Variant */
+  variant?: ToastVariant;
+}
+
+export type StyledToastProps = Omit<ToastProps, 'variant' | 'id'> & {
+  $hasTitle: boolean;
+  $variant: ToastProps['variant'];
+};

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';