feat Add snackbar styling

.storybook/decorators.tsx

@@ -4,21 +4,24 @@ import { NextPage } from "next";
 import { SessionProvider } from "next-auth/react";
 import Router from "next/router";
 import * as React from "react";
+import { Decorator } from "@storybook/react";
+import { Client, Provider } from "urql";
 
 import { i18n } from "../app/locales/locales";
 import { theme } from "../app/themes/federal";
 import AsyncLocalizationProvider from "../app/utils/l10n-provider";
+import { SnackbarProvider } from "../app/components/snackbar";
 
-import { Decorator } from "@storybook/react";
-import { Client, Provider } from "urql";
 
 export const AppContextDecorator = (Story: NextPage) => (
  <SessionProvider refetchOnWindowFocus={false} refetchWhenOffline={false}>
  <AsyncLocalizationProvider locale="en">
  <I18nProvider i18n={i18n}>
  <CssBaseline />
  <ThemeProvider theme={theme}>
- <Story />
+ <SnackbarProvider>
+ <Story />
+ </SnackbarProvider>
  </ThemeProvider>
  </I18nProvider>
  </AsyncLocalizationProvider>

app/components/snackbar.tsx

@@ -0,0 +1,65 @@
+import { styled } from "@mui/material";
+import { success } from "io-ts";
+import {
+ MaterialDesignContent,
+ SnackbarProvider as NotistackSnackbarProvider,
+} from "notistack";
+
+import SvgIcChecked from "@/icons/components/IcChecked";
+import SvgIcWarning from "@/icons/components/IcWarning";
+import SvgIcInfo from "@/icons/components/IcInfo";
+import SvgIcRemove from "@/icons/components/IcRemove";
+import SvgIcClose from "@/icons/components/IcClose";
+import SvgIcClear from "@/icons/components/IcClear";
+
+const StyledMaterialDesignContent = styled(MaterialDesignContent)(
+ ({ theme }) => ({
+ "&.notistack-MuiContent-success": {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.success.light,
+ "--icon-color": theme.palette.success.main,
+ },
+ "&.notistack-MuiContent-error": {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.error.light,
+ "--icon-color": theme.palette.error.main,
+ },
+ "&.notistack-MuiContent-warning": {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.warning.light,
+ "--icon-color": theme.palette.warning.main,
+ },
+ "&.notistack-MuiContent-info": {
+ color: theme.palette.text.primary,
+ backgroundColor: theme.palette.info.light,
+ "--icon-color": theme.palette.info.main,
+ },
+ "& .icon": {
+ marginRight: "0.75rem",
+ color: "var(--icon-color)",
+ },
+ })
+);
+
+const iconVariants = {
+ success: <SvgIcChecked width={24} height={24} className="icon" />,
+ warning: <SvgIcChecked width={24} height={24} className="icon" />,
+ info: <SvgIcInfo width={24} height={24} className="icon" />,
+ error: <SvgIcClear width={24} height={24} className="icon" />,
+};
+
+export const SnackbarProvider = (props: React.PropsWithChildren<{}>) => {
+ return (
+ <NotistackSnackbarProvider
+ anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
+ iconVariant={iconVariants}
+ Components={{
+ info: StyledMaterialDesignContent,
+ warning: StyledMaterialDesignContent,
+ success: StyledMaterialDesignContent,
+ error: StyledMaterialDesignContent,
+ }}
+ {...props}
+ />
+ );
+};

app/docs/theme.stories.tsx

@@ -32,6 +32,7 @@ import {
 import { BoxProps } from "@mui/system";
 import { Meta } from "@storybook/react";
 import { ComponentProps, useState } from "react";
+import { useSnackbar } from "notistack";
 
 import { DialogCloseButton } from "../components/dialog-close-button";
 import useDisclosure from "../components/use-disclosure";
@@ -448,11 +449,43 @@ export const Components: React.FC = () => {
  <MenuItem>Edit</MenuItem>
  </Menu>
  </StorybookSection>
+ <StorybookSection>
+ <StorybookSectionTitle>Snackbars</StorybookSectionTitle>
+ <SnackbarExample />
+ </StorybookSection>
  </Box>
  </>
  );
 };
 
+const SnackbarExample = () => {
+ const { enqueueSnackbar } = useSnackbar();
+ const renderButton = (variant: NonNullable<AlertProps["severity"]>) => {
+ const formatted = `${variant[0].toUpperCase()}${variant?.substring(1)}`;
+ return (
+ <Button
+ color={variant}
+ onClick={() =>
+ enqueueSnackbar({
+ variant: variant,
+ message: `${formatted} message`,
+ })
+ }
+ >
+ {formatted}
+ </Button>
+ );
+ };
+ return (
+ <Stack gap="1rem" direction="row">
+ {renderButton("success")}
+ {renderButton("info")}
+ {renderButton("warning")}
+ {renderButton("error")}
+ </Stack>
+ );
+};
+
 export const DialogExample = () => {
  const { isOpen, close, setOpen } = useDisclosure(true);
  return (

app/package.json

@@ -87,6 +87,7 @@
  "nanoid": "^3.1.12",
  "next-auth": "4.23.1",
  "nextkit": "^3.4.3",
+ "notistack": "^3.0.1",
  "nprogress": "^0.2.0",
  "pg": "^8.3.3",
  "postgres-migrations": "^5.2.0",

app/pages/_app.tsx

@@ -22,6 +22,7 @@ import AsyncLocalizationProvider from "@/utils/l10n-provider";
 import "@/utils/nprogress.css";
 import { useNProgress } from "@/utils/use-nprogress";
 import { EventEmitterProvider } from "@/utils/eventEmitter";
+import { SnackbarProvider } from "@/components/snackbar";
 
 const GQLDebugPanel = dynamic(() => import("@/gql-flamegraph/devtool"), {
  ssr: false,
@@ -89,12 +90,14 @@ export default function App({
  <GraphqlProvider>
  <ThemeProvider theme={federalTheme.theme}>
  <EventEmitterProvider>
- <CssBaseline />
- <Flashes />
- {shouldShowGQLDebug ? <GQLDebugPanel /> : null}
- <AsyncLocalizationProvider locale={locale}>
- <Component {...pageProps} />
- </AsyncLocalizationProvider>
+ <SnackbarProvider>
+ <CssBaseline />
+ <Flashes />
+ {shouldShowGQLDebug ? <GQLDebugPanel /> : null}
+ <AsyncLocalizationProvider locale={locale}>
+ <Component {...pageProps} />
+ </AsyncLocalizationProvider>
+ </SnackbarProvider>
  </EventEmitterProvider>
  </ThemeProvider>
  </GraphqlProvider>