feat(mui-stash-receiver): add stash receiver package

packages/element/package.json

@@ -61,6 +61,7 @@
     "@availity/mui-progress": "workspace:*",
     "@availity/mui-snackbar": "workspace:*",
     "@availity/mui-spaces": "workspace:*",
+    "@availity/mui-stash-receiver": "workspace:*",
     "@availity/mui-stepper": "workspace:*",
     "@availity/mui-table": "workspace:*",
     "@availity/mui-tabs": "workspace:*",

packages/element/src/index.ts

@@ -375,7 +375,7 @@ export {
   MoneyBillIcon,
   CartShoppingIcon,
   BuildingIcon,
-  HospitalIcon
+  HospitalIcon,
 } from '@availity/mui-icon';
 
 // Layout
@@ -534,3 +534,7 @@ export type { TypographyProps } from '@availity/mui-typography';
 
 // Utils
 export { visuallyHidden } from '@availity/mui-utils';
+
+// StashReceiver
+export { StashReceiver, StashContext, useStashContext } from '@availity/mui-stash-receiver';
+export type { StashReceiverProps, StashContextType, StashData } from '@availity/mui-stash-receiver';

packages/mock/src/lib/handlers.ts

@@ -425,6 +425,11 @@ export const handlers = [
     });
   }),
 
+  // Stash
+  http.get(routes.STASH, ({ params }) => {
+    return HttpResponse.json({ memberId: 'member-123', sessionId: params.sessionId });
+  }),
+
   // Example
   http.post(routes.EXAMPLE, async ({ request }) => {
     await delayRequest();

packages/mock/src/lib/routes.ts

@@ -17,5 +17,8 @@ export const ATTACHMENTS_CLOUD_POST = '/cloud/web/appl/vault/upload/v1/resumable
 export const ATTACHMENTS_CLOUD_PATCH = '/cloud/web/appl/vault/upload/v1/resumable/:bucket/:location';
 export const ATTACHMENTS_CLOUD_HEAD = '/cloud/web/appl/vault/upload/v1/resumable/:bucket/:location';
 
+// Stash
+export const STASH = '/cloud/web/appl/stash/v1/session/data/:sessionId';
+
 // Misc
 export const EXAMPLE = '/api/v1/example';

packages/stash-receiver/README.md

@@ -0,0 +1,61 @@
+# @availity/mui-stash-receiver
+
+> Availity MUI StashReceiver component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-stash-receiver.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stash-receiver)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-stash-receiver.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-stash-receiver)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-stash-receiver?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-stash-receiver/package.json)
+
+## Documentation
+
+This package extends the MUI StashReceiver component: [MUI StashReceiver Docs](https://mui.com/components/stash-receiver/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-stash-receiver-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.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-stash-receiver
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-stash-receiver
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { StashReceiver } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { StashReceiver } from '@availity/mui-stash-receiver';
+```

packages/stash-receiver/introduction.mdx

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

packages/stash-receiver/jest.config.js

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

packages/stash-receiver/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@availity/mui-stash-receiver",
+  "version": "0.0.0",
+  "description": "Availity MUI StashReceiver Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-stash-receiver-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/stash-receiver"
+  },
+  "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",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "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": {
+    "@mui/material": "^7.3.4",
+    "axios": "^1.16.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@mui/material": "^7.0.0",
+    "axios": ">=1.0.0",
+    "react": ">=17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/stash-receiver/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-stash-receiver",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/stash-receiver/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/stash-receiver/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/stash-receiver"],
+      "options": {
+        "jestConfig": "packages/stash-receiver/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"]
+      }
+    }
+  }
+}

packages/stash-receiver/src/index.ts

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

packages/stash-receiver/src/lib/StashReceiver.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { StashReceiver, useStashContext } from './StashReceiver';
+
+const meta: Meta<typeof StashReceiver> = {
+  title: 'Components/StashReceiver/StashReceiver',
+  component: StashReceiver,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const StashDisplay = () => {
+  const { data, loading, error } = useStashContext();
+  if (loading) return <p>Loading stash data...</p>;
+  if (error) return <p>Error: {error}</p>;
+  return <pre>{JSON.stringify(data, null, 2)}</pre>;
+};
+
+export const _StashReceiver: StoryObj<typeof StashReceiver> = {
+  render: (args) => (
+    <StashReceiver {...args}>
+      <StashDisplay />
+    </StashReceiver>
+  ),
+  args: {
+    sessionId: 'example-session-id',
+  },
+};

packages/stash-receiver/src/lib/StashReceiver.test.tsx

@@ -0,0 +1,53 @@
+import '@testing-library/jest-dom';
+import { render, waitFor } from '@testing-library/react';
+import { http, HttpResponse } from 'msw';
+import { StashReceiver, useStashContext } from './StashReceiver';
+
+// eslint-disable-next-line @nx/enforce-module-boundaries
+import { server } from '../../../mock/src/lib/server';
+
+beforeAll(() => server.listen());
+afterEach(() => server.resetHandlers());
+afterAll(() => server.close());
+
+const Consumer = () => {
+  const { data, loading, error } = useStashContext();
+  if (loading) return <span>loading</span>;
+  if (error) return <span>error: {error}</span>;
+  return <span>memberId: {String(data?.memberId)}</span>;
+};
+
+describe('StashReceiver', () => {
+  it('shows loading state initially', () => {
+    const { getByText } = render(
+      <StashReceiver sessionId="test-session">
+        <Consumer />
+      </StashReceiver>
+    );
+    expect(getByText('loading')).toBeInTheDocument();
+  });
+
+  it('provides stash data to children after fetch', async () => {
+    const { getByText } = render(
+      <StashReceiver sessionId="test-session">
+        <Consumer />
+      </StashReceiver>
+    );
+    await waitFor(() => expect(getByText('memberId: member-123')).toBeInTheDocument());
+  });
+
+  it('provides error state when fetch fails', async () => {
+    server.use(
+      http.get('/cloud/web/appl/stash/v1/session/data/:sessionId', () =>
+        HttpResponse.json({ message: 'Server Error' }, { status: 500 })
+      )
+    );
+
+    const { getByText } = render(
+      <StashReceiver sessionId="bad-session">
+        <Consumer />
+      </StashReceiver>
+    );
+    await waitFor(() => expect(getByText('error: Error fetching stash data.')).toBeInTheDocument());
+  });
+});

packages/stash-receiver/src/lib/StashReceiver.tsx

@@ -0,0 +1,56 @@
+import { createContext, useContext, useEffect, useState } from 'react';
+import axios from 'axios';
+
+export type StashData = Record<string, unknown>;
+
+export type StashContextType = {
+  /** The data returned from the Stash API. */
+  data: StashData | undefined;
+  /** Whether the Stash API call is in progress. */
+  loading: boolean;
+  /** Error message if the Stash API call failed. */
+  error: string | undefined;
+};
+
+export type StashReceiverProps = {
+  /** The session ID used to fetch data from the Stash API. */
+  sessionId: string;
+  /** Children rendered inside the provider. */
+  children?: React.ReactNode;
+};
+
+export const STASH_API_URL = '/cloud/web/appl/stash/v1/session/data';
+
+export const INITIAL_STATE: StashContextType = {
+  data: undefined,
+  loading: true,
+  error: undefined,
+};
+
+export const StashContext = createContext<StashContextType>(INITIAL_STATE);
+
+export const useStashContext = () => useContext(StashContext);
+
+export const StashReceiver = ({ sessionId, children }: StashReceiverProps): React.JSX.Element => {
+  const [data, setData] = useState<StashContextType['data']>(undefined);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(undefined);
+    axios
+      .get(`${STASH_API_URL}/${sessionId}`)
+      .then((res) => {
+        setData(res.data);
+      })
+      .catch(() => {
+        setError('Error fetching stash data.');
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [sessionId]);
+
+  return <StashContext.Provider value={{ data, loading, error }}>{children}</StashContext.Provider>;
+};

packages/stash-receiver/tsconfig.json

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

packages/stash-receiver/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"]
+}

tsconfig.base.json

@@ -63,6 +63,7 @@
       "@availity/mui-progress": ["packages/progress/src/index.ts"],
       "@availity/mui-snackbar": ["packages/snackbar/src/index.ts"],
       "@availity/mui-spaces": ["packages/spaces/src/index.ts"],
+      "@availity/mui-stash-receiver": ["packages/stash-receiver/src/index.ts"],
       "@availity/mui-stepper": ["packages/stepper/src/index.ts"],
       "@availity/mui-table": ["packages/table/src/index.ts"],
       "@availity/mui-tabs": ["packages/tabs/src/index.ts"],