feat: add snackbar component

Author: abelflopes

packages/components/_provisional/src/index.ts

@@ -13,3 +13,5 @@ export * from "./scrollable-container";
 export * from "./position-engine";
 
 export * from "./top-bar";
+
+export * from "./snackbar";

packages/components/_provisional/src/snackbar/Snackbar.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { SnackbarContext, type SnackbarContextProps } from "./context";
+import { generateId } from "./utils";
+import { Layer } from "@react-ck/layers";
+import { ElementCreator, type Item } from "./types";
+import { SnackbarItem } from "./SnackbarItem";
+import styles from "./styles/index.module.scss";
+import classNames from "classnames";
+
+export interface SnackbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  initialItems?: ElementCreator[];
+}
+
+export const Snackbar = ({
+  initialItems,
+  className,
+  children,
+  ...otherProps
+}: Readonly<SnackbarProps>): React.ReactElement => {
+  const [items, setItems] = useState<Item[]>(
+    initialItems?.map((elementCreator) => {
+      const id = generateId();
+      const element = elementCreator(id);
+
+      return {
+        id,
+        element: <SnackbarItem>{element}</SnackbarItem>,
+      };
+    }) ?? [],
+  );
+
+  const add = useCallback<SnackbarContextProps["add"]>((elementCreator) => {
+    const id = generateId();
+    const element = elementCreator(id);
+
+    setItems((v) => [
+      ...v,
+      {
+        id,
+        element: <SnackbarItem>{element}</SnackbarItem>,
+      },
+    ]);
+
+    return id;
+  }, []);
+
+  const remove = useCallback<SnackbarContextProps["remove"]>((id) => {
+    setItems((v) => v.filter((i) => i.id !== id));
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({
+      add,
+      remove,
+    }),
+    [add, remove],
+  );
+
+  return (
+    <Layer elevation="popup">
+      {items.length > 0 && (
+        <div className={classNames(className, styles.root)} {...otherProps}>
+          {items.map((i) => i.element)}
+        </div>
+      )}
+
+      <SnackbarContext.Provider value={contextValue}>{children}</SnackbarContext.Provider>
+    </Layer>
+  );
+};

packages/components/_provisional/src/snackbar/SnackbarItem.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import styles from "./styles/item.module.scss";
+import classNames from "classnames";
+
+export type SnackbarItemProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const SnackbarItem = ({
+  className,
+  ...otherProps
+}: Readonly<SnackbarItemProps>): React.ReactElement => (
+  <div className={classNames(styles.root, className)} {...otherProps} />
+);

packages/components/_provisional/src/snackbar/context.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { ElementCreator, Item } from "./types";
+
+export interface SnackbarContextProps {
+  add: (elementCreator: ElementCreator) => Item["id"];
+  remove: (id: Item["id"]) => void;
+}
+
+export const SnackbarContext = React.createContext<SnackbarContextProps>({
+  add: () => {
+    throw new Error("Snackbar context not initialized");
+  },
+  remove: () => {
+    throw new Error("Snackbar context not initialized");
+  },
+});

packages/components/_provisional/src/snackbar/hook.ts

@@ -0,0 +1,4 @@
+import { useContext } from "react";
+import { SnackbarContext, type SnackbarContextProps } from "./context";
+
+export const useSnackbarContext = (): SnackbarContextProps => useContext(SnackbarContext);

packages/components/_provisional/src/snackbar/index.ts

@@ -0,0 +1,3 @@
+export * from "./hook";
+
+export * from "./Snackbar";

packages/components/_provisional/src/snackbar/styles/index.module.scss

@@ -0,0 +1,18 @@
+@import "@react-ck/theme";
+
+.root {
+  position: fixed;
+  flex-direction: column;
+  top: 0;
+  right: 0;
+  max-height: 100%;
+  width: 100%;
+  max-width: 480px;
+  box-sizing: border-box;
+  display: flex;
+  gap: get-spacing(1);
+  padding: get-spacing(2) get-spacing(1);
+  overflow: auto;
+  pointer-events: none;
+  filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.1));
+}

packages/components/_provisional/src/snackbar/styles/item.module.scss

@@ -0,0 +1,3 @@
+.root {
+  pointer-events: all;
+}

packages/components/_provisional/src/snackbar/types.ts

@@ -0,0 +1,6 @@
+export interface Item {
+  id: string;
+  element: React.ReactNode;
+}
+
+export type ElementCreator = (id: Item["id"]) => Item["element"];

packages/components/_provisional/src/snackbar/utils.ts

@@ -0,0 +1,7 @@
+let n = 0;
+
+export const generateId = (): string => {
+  n += 1;
+
+  return `${n}.${new Date().getTime()}.${Math.random()}`;
+};