@conveyorhq/arrow-ds 2.0.0-beta.6 → 2.0.0-beta.7

package/src/components/Snackbar/Snackbar.story.mdx

@@ -10,7 +10,7 @@ import { ORIENTATION } from "../../types";
 import { Button } from "../Button";
 import { ICON_TYPE } from "../Icon";
 import { Stack } from "../Stack";
-import { Snackbar, useSnackbar, showSnackbar } from "./Snackbar";
+import { Snackbar, useSnackbar, showSnackbar, useSnackbarContext } from "./";
 
 <Meta title="Components/Feedback/Snackbar" component={Snackbar} />
 
@@ -27,13 +27,25 @@ The Snackbar component doesn’t get called directly. Instead use either
 on-screen. You will need a way to dynamically set the `isVisible` prop in order
 to show and hide the Snackbar on demand.
 
-The Snackbar will appear at the bottom-left of the screen. This is not
-configurable.
+The Snackbar can appear at either the bottom-left or bottom-right of the screen.
 
 ```jsx
 import { useSnackbar, showSnackbar } from "@conveyorhq/arrow-ds";
 ```
 
+export const CustomSnackbar = ({ children }) => {
+  const { onClose } = useSnackbarContext();
+  return (
+    <div
+      className="rounded p-10 bg-gold-200 m-4 leading-normal"
+      onClick={onClose}
+    >
+      <p>{children}</p>
+      <p>Click anywhere to close</p>
+    </div>
+  );
+};
+
 Here is a preview of how the Snackbar could look in its three different states.
 Don’t copy these examples because a Snackbar should be implemented using the
 `useSnackbar` hook, which is detailed below.
@@ -121,7 +133,7 @@ A duration can be used with an action if necessary.
           },
         });
       };
-      return <Button onClick={onClick}>Show Snackbar</Button>;
+      return <Button onClick={onClick}>Show Snackbar with action</Button>;
     }}
   </Story>
 </Preview>
@@ -142,12 +154,12 @@ hide the Snackbar with `useState` and `setTimeout`.
         }, 3000);
       };
       useSnackbar({
-        message: "Ok, here’s your snackbar",
+        message: "Snackbar triggered from a hook",
         isVisible,
       });
       return (
         <Button disabled={isVisible} onClick={onClick}>
-          I’m hungry
+          Use Snackbar
         </Button>
       );
     }}
@@ -201,10 +213,85 @@ happening is done.
   </Story>
 </Preview>
 
-## useSnackbar Props
+## Using a custom component
+
+If you need Snackbar functionality, but would like to use a custom UI, you can
+pass a `ReactNode` to the `component` prop. Note that you will need to handle
+closing of the Snackbar on your own, but that’s made easy using the context
+provider.
+
+<Preview withSource={SourceState.OPEN}>
+  <Story name="showSnackbar function with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const onClick = () => {
+        showSnackbar({
+          component: (
+            <CustomSnackbar>
+              I am a custom snackbar without a duration
+            </CustomSnackbar>
+          ),
+          position: "bottom-right",
+        });
+      };
+      return <Button onClick={onClick}>Show Custom Snackbar</Button>;
+    }}
+  </Story>
+</Preview>
+
+A custom component can also be used with the `useSnackbar` hook.
 
-<Props of={useSnackbar} />
+<Preview withSource={SourceState.OPEN}>
+  <Story name="useSnackbar hook with a component">
+    {() => {
+      const CustomSnackbar = ({ children }) => {
+        const { onClose } = useSnackbarContext();
+        return (
+          <div
+            className="rounded p-10 bg-gold-200 m-4 leading-normal"
+            onClick={onClose}
+          >
+            <p>{children}</p>
+            <p>Click anywhere to close</p>
+          </div>
+        );
+      };
+      const [isVisible, setVisible] = React.useState(false);
+      useSnackbar({
+        component: (
+          <CustomSnackbar>
+            I am a custom snackbar and will close in 3 seconds
+          </CustomSnackbar>
+        ),
+        position: "bottom-right",
+        isVisible,
+      });
+      const onClick = () => {
+        setVisible(true);
+        setTimeout(() => {
+          setVisible(false);
+        }, 3000);
+      };
+      return (
+        <Button disabled={isVisible} onClick={onClick}>
+          Use Custom Snackbar
+        </Button>
+      );
+    }}
+  </Story>
+</Preview>
 
-## showSnackbar Props
+## API
 
 <Props of={showSnackbar} />

package/src/components/Snackbar/Snackbar.tsx

@@ -1,69 +1,46 @@
-import React, { useEffect, useState } from "react";
-import toaster from "toasted-notes";
+import React from "react";
 import classNames from "classnames";
 import { Action } from "../../types";
 import { bemHOF } from "../../utilities/bem";
 import { Box } from "../Box";
 import { CloseButton } from "../CloseButton";
-import { Icon, IconProps, ICON_TYPE } from "../Icon";
+import { Icon, ICON_TYPE } from "../Icon";
 import { Link } from "../Link";
 import { Text } from "../Text";
+import { useSnackbarContext } from "./context";
+import {
+  SnackbarProps,
+  SnackbarRootProps,
+  SnackbarIconProps,
+  SnackbarTextProps,
+} from "./types";
+import { SnackbarProvider } from "./SnackbarProvider";
 
 const cn = bemHOF("Snackbar");
 
-const POSITION = "bottom-left";
-
-interface SharedProps {
-  /**
-   * The message shown in the Snackbar; ideally short and succinct
-   */
-  message: string;
-  /**
-   * Adds an action next to the message
-   */
-  action?: Action;
-  /**
-   * When a loading icon is detected, it will automatically spin.
-   *
-   * Sizing is handled automatically, too.
-   */
-  icon?: ICON_TYPE;
-  /**
-   * The amount of time (in milliseconds) the snackbar appears on-screen. If
-   * undefined, then the Snackbar will stay on-screen indefinitely. An undefined
-   * duration would be used in cases when the Snackbar is used as a loading
-   * message (e.g., an in progress API call).
-   */
-  duration?: number | null;
-  /**
-   * Prevent the close button from rendering. Useful in cases when the Snackbar
-   * is used as a loading message (e.g., an in progress API call).
-   */
-  disableClose?: boolean;
-}
-
-interface ShowSnackbarProps extends SharedProps {
-  /**
-   * Classname to apply to the Snackbar root element
-   */
-  className?: string;
-}
-
-interface SnackbarProps extends ShowSnackbarProps {
-  onClose: () => void;
-  id?: string;
-}
+export const SnackbarRoot = ({
+  children,
+  className,
+  ...rest
+}: SnackbarRootProps) => (
+  <Box className={classNames(cn(), className)} {...rest}>
+    {children}
+  </Box>
+);
 
-interface SnackbarHookProps extends SharedProps {
-  /**
-   * Whether or not the Snackar is visible
-   */
-  isVisible: boolean;
-}
+export const SnackbarIcon = ({ icon }: SnackbarIconProps) => (
+  <Icon
+    icon={icon}
+    spin={icon === ICON_TYPE.SPINNER || icon === ICON_TYPE.CIRCLE_NOTCH}
+    className={cn({ e: "icon" })}
+  />
+);
 
-const hideSnackbar = (id: number) => toaster.close(id, POSITION);
+export const SnackbarText = ({ children }: SnackbarTextProps) => (
+  <Text>{children}</Text>
+);
 
-const SnackbarAction = ({ label, onClick, href, external }: Action) => {
+export const SnackbarAction = ({ label, onClick, href, external }: Action) => {
   const Component = typeof onClick === "function" ? "button" : "a";
   const type = Component === "button" ? "button" : undefined;
 
@@ -81,27 +58,33 @@ const SnackbarAction = ({ label, onClick, href, external }: Action) => {
   );
 };
 
+export const SnackbarCloseButton = () => {
+  const { onClose } = useSnackbarContext();
+
+  return (
+    <CloseButton
+      className={classNames(cn({ e: "dismiss" }))}
+      onClick={onClose}
+    />
+  );
+};
+
 export const Snackbar = ({
   message,
   action,
   icon,
-  id,
   className,
-  onClose,
   disableClose,
+  ...rest
 }: SnackbarProps) => {
-  const spin = icon === ICON_TYPE.SPINNER || icon === ICON_TYPE.CIRCLE_NOTCH;
-  const iconProps: IconProps | undefined = icon
-    ? {
-        icon,
-        spin,
-      }
-    : undefined;
+  const { onClose } = useSnackbarContext();
 
   return (
-    <Box className={classNames(cn(), className)} id={id}>
-      {iconProps && <Icon {...iconProps} className={cn({ e: "icon" })} />}
-      <Text>{message}</Text>
+    <SnackbarRoot className={className} {...rest}>
+      {icon && <SnackbarIcon icon={icon} />}
+
+      {message && <SnackbarText>{message}</SnackbarText>}
+
       {action && action.label && (
         <SnackbarAction
           {...action}
@@ -113,86 +96,14 @@ export const Snackbar = ({
           }}
         />
       )}
-      {!disableClose && (
-        <CloseButton
-          className={classNames(cn({ e: "dismiss" }))}
-          onClick={onClose}
-        />
-      )}
-    </Box>
-  );
-};
 
-export const showSnackbar = ({
-  message,
-  action,
-  icon,
-  duration = null,
-  className,
-  disableClose,
-}: ShowSnackbarProps) =>
-  toaster.notify(
-    ({ onClose, id }: { onClose: () => void; id: number }) => {
-      return (
-        <Snackbar
-          {...{
-            message,
-            onClose,
-            action,
-            icon,
-            className,
-            disableClose,
-            id: `snackbar-component-${id}`,
-          }}
-        />
-      );
-    },
-    {
-      position: POSITION,
-      duration,
-    },
+      {!disableClose && <SnackbarCloseButton />}
+    </SnackbarRoot>
   );
-
-export const useSnackbar = ({
-  message,
-  action,
-  isVisible,
-  icon,
-  duration,
-  disableClose,
-}: SnackbarHookProps) => {
-  const [snackbar, setSnackbar] = useState<{ id: number; position: string }>({
-    id: 0,
-    position: POSITION,
-  });
-  const [wasViewed, setWasViewed] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (isVisible && !wasViewed) {
-      setSnackbar(
-        showSnackbar({
-          message,
-          action,
-          icon,
-          duration,
-          disableClose,
-        }),
-      );
-      setWasViewed(true);
-    }
-
-    if (!isVisible && wasViewed) {
-      hideSnackbar(snackbar.id);
-      setWasViewed(false);
-    }
-  }, [
-    message,
-    action,
-    isVisible,
-    icon,
-    duration,
-    disableClose,
-    snackbar,
-    wasViewed,
-  ]);
 };
+
+Snackbar.Provider = SnackbarProvider;
+Snackbar.Root = SnackbarRoot;
+Snackbar.Text = SnackbarText;
+Snackbar.Action = SnackbarAction;
+Snackbar.CloseButton = SnackbarCloseButton;

package/src/components/Snackbar/SnackbarProvider.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Box } from "../Box";
+import { SnackbarProviderProps } from "./types";
+import { DEFAULT_SNACKBAR_ID } from "./constants";
+import { SnackbarContext } from "./context";
+
+export const SnackbarProvider = ({
+  component,
+  id = DEFAULT_SNACKBAR_ID,
+  onClose,
+  duration,
+  position,
+  ...rest
+}: SnackbarProviderProps) => {
+  const componentId = "snackbar-provider";
+
+  return (
+    <SnackbarContext.Provider
+      value={{
+        id,
+        onClose,
+        duration,
+        position,
+      }}
+    >
+      <Box id={`${componentId}-${id}`} data-component={componentId} {...rest}>
+        {component}
+      </Box>
+    </SnackbarContext.Provider>
+  );
+};

package/src/components/Snackbar/constants.ts

@@ -0,0 +1,2 @@
+export const DEFAULT_SNACKBAR_ID = 0;
+export const DEFAULT_SNACKBAR_POSITION = "bottom-left";

package/src/components/Snackbar/context.ts

@@ -0,0 +1,20 @@
+import { Context, createContext, useContext } from "react";
+import { SnackbarContextProps } from "./types";
+import { DEFAULT_SNACKBAR_ID } from "./constants";
+
+const defaultContext: SnackbarContextProps = {
+  id: DEFAULT_SNACKBAR_ID,
+  onClose: () => {},
+};
+
+export const SnackbarContext: Context<SnackbarContextProps> = createContext<SnackbarContextProps>(
+  defaultContext,
+);
+
+export function useSnackbarContext() {
+  const context = useContext<typeof defaultContext>(SnackbarContext) || {
+    ...defaultContext,
+  };
+
+  return context;
+}

package/src/components/Snackbar/helpers.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import toaster from "toasted-notes";
+import { DEFAULT_SNACKBAR_POSITION } from "./constants";
+import { Snackbar } from "./Snackbar";
+import { SnackbarProvider } from "./SnackbarProvider";
+import {
+  HideSnackbarProps,
+  SnackbarToasterProps,
+  ShowSnackbarProps,
+} from "./types";
+
+export const hideSnackbar = ({
+  id,
+  position = DEFAULT_SNACKBAR_POSITION,
+}: HideSnackbarProps) => toaster.close(id, position);
+
+export const showSnackbar = ({
+  component,
+  message,
+  duration = null,
+  position = DEFAULT_SNACKBAR_POSITION,
+  ...rest
+}: ShowSnackbarProps) => {
+  return toaster.notify(
+    ({ onClose, id }: SnackbarToasterProps) => {
+      return (
+        <SnackbarProvider
+          {...{
+            id,
+            onClose,
+            duration,
+            position,
+            component: message ? (
+              <Snackbar
+                {...{
+                  message,
+                  ...rest,
+                }}
+              />
+            ) : (
+              component
+            ),
+          }}
+        />
+      );
+    },
+    {
+      position,
+      duration,
+    },
+  );
+};

package/src/components/Snackbar/hooks.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from "react";
+import { DEFAULT_SNACKBAR_ID, DEFAULT_SNACKBAR_POSITION } from "./constants";
+import { hideSnackbar, showSnackbar } from "./helpers";
+import { SnackbarHookProps, SnackbarStateProps } from "./types";
+
+export const useSnackbar = ({
+  component,
+  message,
+  position,
+  duration,
+  isVisible,
+  ...rest
+}: SnackbarHookProps) => {
+  const [snackbar, setSnackbar] = useState<SnackbarStateProps>({
+    id: DEFAULT_SNACKBAR_ID,
+    position: DEFAULT_SNACKBAR_POSITION,
+  });
+  const [wasViewed, setWasViewed] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (isVisible && !wasViewed) {
+      if (message) {
+        setSnackbar(
+          showSnackbar({
+            message,
+            position,
+            duration,
+            ...rest,
+          }),
+        );
+      } else {
+        setSnackbar(
+          showSnackbar({
+            component,
+            position,
+            duration,
+          }),
+        );
+      }
+      setWasViewed(true);
+    }
+
+    if (!isVisible && wasViewed) {
+      hideSnackbar({ id: snackbar.id, position });
+      setWasViewed(false);
+    }
+  }, [
+    component,
+    message,
+    position,
+    duration,
+    isVisible,
+    snackbar.id,
+    wasViewed,
+    rest,
+  ]);
+};

package/src/components/Snackbar/index.ts

@@ -1 +1,7 @@
+export * from "./constants";
+export * from "./context";
+export * from "./helpers";
+export * from "./hooks";
 export * from "./Snackbar";
+export * from "./SnackbarProvider";
+export * from "./types";