@availity/mui-snackbar 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-10-15)
+
+### Dependency Updates
+
+* `mui-alert` updated to version `0.1.0`
+* `mui-button` updated to version `0.1.0`
+* `mui-layout` updated to version `0.1.0`
+* `mui-transitions` updated to version `0.1.0`
+
+### Features
+
+* **mui-snackbar:** add snackbar component ([a8e5e8f](https://github.com/Availity/element/commit/a8e5e8f64c0b810ecbd3e2099d8a6354e3c005bc))

package/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-snackbar
+
+> Availity MUI Snackbar component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-snackbar.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-snackbar)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-snackbar.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-snackbar)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-snackbar?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-snackbar/package.json)
+
+## Documentation
+
+This package extends the MUI Snackbar component: [MUI Snackbar Docs](https://mui.com/components/snackbar/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-snackbar-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material` & `@emotion/react` to your project if not already installed._
+
+```bash
+npm install @availity/mui-snackbar
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-snackbar
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { Snackbar } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { Snackbar } from '@availity/mui-snackbar';
+```

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+import { SnackbarProps as SnackbarProps$1, SnackbarCloseReason as SnackbarCloseReason$1 } from '@mui/material/Snackbar';
+
+type SnackbarProps = Omit<SnackbarProps$1, 'action' | 'ContentProps' | 'message' | 'TransitionComponent' | 'transitionDuration'>;
+type SnackbarCloseReason = SnackbarCloseReason$1;
+declare const Snackbar: (props: SnackbarProps) => JSX.Element;
+
+export { Snackbar, type SnackbarCloseReason, type SnackbarProps };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { SnackbarProps as SnackbarProps$1, SnackbarCloseReason as SnackbarCloseReason$1 } from '@mui/material/Snackbar';
+
+type SnackbarProps = Omit<SnackbarProps$1, 'action' | 'ContentProps' | 'message' | 'TransitionComponent' | 'transitionDuration'>;
+type SnackbarCloseReason = SnackbarCloseReason$1;
+declare const Snackbar: (props: SnackbarProps) => JSX.Element;
+
+export { Snackbar, type SnackbarCloseReason, type SnackbarProps };

package/dist/index.js

@@ -0,0 +1,60 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Snackbar: () => Snackbar
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Snackbar.tsx
+var import_Snackbar = __toESM(require("@mui/material/Snackbar"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Snackbar = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Snackbar.default, __spreadValues({}, props));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Snackbar
+});

package/dist/index.mjs

@@ -0,0 +1,26 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/lib/Snackbar.tsx
+import MuiSnackbar from "@mui/material/Snackbar";
+import { jsx } from "react/jsx-runtime";
+var Snackbar = (props) => {
+  return /* @__PURE__ */ jsx(MuiSnackbar, __spreadValues({}, props));
+};
+export {
+  Snackbar
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/Snackbar/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'snackbar',
+  coverageDirectory: '../../coverage/snackbar',
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@availity/mui-snackbar",
+  "version": "0.1.0",
+  "description": "Availity MUI Snackbar Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-snackbar-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/snackbar"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@availity/mui-alert": "0.6.0",
+    "@availity/mui-button": "0.6.10",
+    "@availity/mui-layout": "0.1.6",
+    "@availity/mui-transitions": "0.2.4",
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-snackbar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/snackbar/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/snackbar/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/snackbar"],
+      "options": {
+        "jestConfig": "packages/snackbar/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1 @@
+export * from './lib/Snackbar';

package/src/lib/Snackbar.stories.tsx

@@ -0,0 +1,265 @@
+// Each exported component in the package should have its own stories file
+
+import { SyntheticEvent, useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Alert, AlertTitle } from '@availity/mui-alert';
+import { Button } from '@availity/mui-button';
+import { Box, Grid } from '@availity/mui-layout';
+import { Collapse } from '@availity/mui-transitions';
+import { Link } from '@mui/material';
+import { Snackbar, SnackbarProps, SnackbarCloseReason } from './Snackbar';
+import { styled } from '@mui/material/styles';
+
+/**
+ * Snackbars (also known as toasts) are used for brief notifications of processes that have been or will be performed.
+ *
+ * Availity does not currently use the Material `SnackbarContent` component for basic messages,
+ * instead every `Snackbar` should contain an `Alert` to convey messages.
+ */
+const meta: Meta<typeof Snackbar> = {
+  title: 'Components/Snackbar/Snackbar',
+  component: Snackbar,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const SnackbarStoryPreview = styled("div", {
+  name: 'MuiSnackbar',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root,
+})(({}));
+
+export const _Snackbar: StoryObj<typeof Snackbar> = {
+  render: (args: SnackbarProps) => {
+    const [open, setOpen] = useState(false);
+
+    const handleClick = () => {
+      setOpen(true);
+    };
+
+    const handleClose = (
+      event: SyntheticEvent | Event,
+      reason?: SnackbarCloseReason,
+    ) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+
+      setOpen(false);
+    };
+
+    const action = (
+      <Link component="button" onClick={handleClose}>
+        Action
+      </Link>
+    );
+
+    return (
+      <Box sx={{minHeight: '200px'}}>
+        <Button onClick={handleClick}>Open Snackbar</Button>
+        <Snackbar
+          {...args}
+          open={open}
+        >
+          <Alert icon={false} onClose={handleClose} action={action} severity='info'>Alert Text</Alert>
+        </Snackbar>
+      </Box>
+    );
+  },
+  args: {
+    anchorOrigin: { vertical: 'bottom', horizontal: 'left'},
+    autoHideDuration: 6000,
+  },
+};
+
+export const _Actions: StoryObj<typeof Snackbar> = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+
+    const onClose = () => {
+      setVisible(false);
+      setTimeout(() => setVisible(true), 1000);
+    };
+
+    const actionButton = <Link component="button" onClick={onClose}>Action Button</Link>;
+
+    const actionLink = <Link href='#' >Action Link</Link>;
+
+    return (
+      <Grid container spacing={1} maxWidth="620px">
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" icon={false}>
+                No Action, No Close
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" icon={false} onClose={onClose}>
+                Close
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" icon={false} action={actionButton}>
+                Action Button
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" icon={false} action={actionLink}>
+                Action Link
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" icon={false} onClose={onClose} action={actionButton}>
+                Action Button & Close
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+      </Grid>
+    )
+  }
+};
+
+export const _Alerts: StoryObj<typeof Snackbar> = {
+  render: () => {
+    const [visible, setVisible] = useState(true);
+
+    const onClose = () => {
+      setVisible(false);
+      setTimeout(() => setVisible(true), 1000);
+    };
+
+    return (
+      <Grid container spacing={1} maxWidth="620px">
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="info" onClose={onClose}>
+                <AlertTitle>Info Alert Snackbar</AlertTitle>
+                Additional text.
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="success" onClose={onClose}>
+                <AlertTitle>Success Alert Snackbar</AlertTitle>
+                Additional text.
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="warning" onClose={onClose}>
+                <AlertTitle>Warning Alert Snackbar</AlertTitle>
+                Additional text.
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+        <Grid>
+          <Collapse in={visible}>
+            <SnackbarStoryPreview>
+              <Alert severity="error" onClose={onClose}>
+                <AlertTitle>Error Alert Snackbar</AlertTitle>
+                Additional text. Don't make a snackbar more than a couple sentences!
+              </Alert>
+            </SnackbarStoryPreview>
+          </Collapse>
+        </Grid>
+      </Grid>
+    )
+  }
+};
+
+interface SnackbarMessage {
+  message: string;
+  key: number;
+}
+
+/** This demo shows how to display multiple Snackbars without stacking them by using a consecutive animation. */
+export const _ConsecutiveSnackbars: StoryObj<typeof Snackbar> = {
+  render: () => {
+    const [snackPack, setSnackPack] = useState<readonly SnackbarMessage[]>([]);
+    const [open, setOpen] = useState(false);
+    const [messageInfo, setMessageInfo] = useState<SnackbarMessage | undefined>(
+      undefined,
+    );
+
+    useEffect(() => {
+      if (snackPack.length && !messageInfo) {
+        // Set a new snack when we don't have an active one
+        setMessageInfo({ ...snackPack[0] });
+        setSnackPack((prev) => prev.slice(1));
+        setOpen(true);
+      } else if (snackPack.length && messageInfo && open) {
+        // Close an active snack when a new one is added
+        setOpen(false);
+      }
+    }, [snackPack, messageInfo, open]);
+
+    const handleClick = (message: string) => () => {
+      setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]);
+    };
+
+    const handleClose = (
+      event: SyntheticEvent | Event,
+      reason?: SnackbarCloseReason,
+    ) => {
+      if (reason === 'clickaway') {
+        return;
+      }
+      setOpen(false);
+    };
+
+    const handleExited = () => {
+      setMessageInfo(undefined);
+    };
+
+    return (
+      <Box minHeight="250px" gap="8px">
+        <Grid container spacing={2}>
+          <Grid xs={12}>
+            <Button onClick={handleClick('Message A')}>Show message A</Button>
+          </Grid>
+          <Grid xs={12}>
+            <Button onClick={handleClick('Message B')}>Show message B</Button>
+          </Grid>
+        </Grid>
+        <Snackbar
+          key={messageInfo ? messageInfo.key : undefined}
+          open={open}
+          autoHideDuration={6000}
+          onClose={handleClose}
+          TransitionProps={{ onExited: handleExited }}
+        >
+          <Alert severity="info" icon={false} onClose={handleClose}>
+            {messageInfo?.message}
+          </Alert>
+        </Snackbar>
+      </Box>
+    );
+  }
+}

package/src/lib/Snackbar.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import { Snackbar } from './Snackbar';
+
+describe('Snackbar', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(<Snackbar open><div>Test</div></Snackbar>);
+    expect(getByText('Test')).toBeTruthy();
+  });
+});

package/src/lib/Snackbar.tsx

@@ -0,0 +1,10 @@
+// For bundling purposes, always use the direct import for an mui component, i.e. '@mui/material/xxx'
+import MuiSnackbar, { SnackbarProps as MuiSnackbarProps, SnackbarCloseReason as MuiSnackbarCloseReason } from '@mui/material/Snackbar';
+
+export type SnackbarProps = Omit<MuiSnackbarProps, 'action' | 'ContentProps' | 'message' | 'TransitionComponent' | 'transitionDuration'>;
+
+export type SnackbarCloseReason = MuiSnackbarCloseReason;
+
+export const Snackbar = (props: SnackbarProps): JSX.Element => {
+  return <MuiSnackbar {...props}/>;
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}