@availity/mui-breadcrumbs 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-07-13)
+
+
+### Features
+
+* **mui-breadcrumbs:** initial commit ([39aa735](https://github.com/Availity/element/commit/39aa735c3e9c4b2d8492703924cef25b5337882b))
+
+
+### Bug Fixes
+
+* **mui-breadcrumbs:** import deps ([e131b21](https://github.com/Availity/element/commit/e131b2193a4b3cc7d51a093e71cef932c17cda6e))

package/README.md

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

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { BreadcrumbsProps as BreadcrumbsProps$1 } from '@mui/material';
+
+interface Crumb {
+    /** The name of the ancestor page. */
+    name: string;
+    /** The url for navigating to the ancestor page. */
+    url: string;
+}
+interface BreadcrumbsProps extends Omit<BreadcrumbsProps$1, 'separator'> {
+    /** The name of the active page (the page the user is currently on). */
+    active?: string;
+    children?: React.ReactNode;
+    /** The ancestor pages. */
+    crumbs?: Crumb[];
+    /** The value to display when the active page or an ancestor does not have a value.
+     * @default ... */
+    emptyState?: string;
+    /** Url for the Home route.
+     * @default /public/apps/dashboard */
+    homeUrl?: string;
+}
+declare const Breadcrumbs: ({ active, children, crumbs, emptyState, homeUrl, ...rest }: BreadcrumbsProps) => JSX.Element;
+
+export { Breadcrumbs, BreadcrumbsProps };

package/dist/index.js

@@ -0,0 +1,74 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Breadcrumbs: () => Breadcrumbs
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Breadcrumbs.tsx
+var import_material = require("@mui/material");
+var import_mui_icon = require("@availity/mui-icon");
+var import_mui_link = require("@availity/mui-link");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Breadcrumbs = ({
+  active,
+  children,
+  crumbs,
+  emptyState = "...",
+  homeUrl = "/public/apps/dashboard",
+  ...rest
+}) => {
+  const renderBreadCrumb = ({ name = emptyState, url }) => {
+    const props = {
+      "aria-label": name,
+      children: name
+    };
+    return url ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
+      ...props,
+      href: url
+    }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
+      ...props
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Breadcrumbs, {
+    ...rest,
+    separator: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.NavigateNextIcon, {
+      fontSize: "small"
+    }),
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_link.Link, {
+        "aria-label": "Home",
+        href: homeUrl,
+        children: "Home"
+      }),
+      crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb)),
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Typography, {
+        children: active || emptyState
+      })
+    ]
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Breadcrumbs
+});

package/dist/index.mjs

@@ -0,0 +1,47 @@
+// src/lib/Breadcrumbs.tsx
+import { Breadcrumbs as MuiBreadcrumbs, Typography } from "@mui/material";
+import { NavigateNextIcon } from "@availity/mui-icon";
+import { Link } from "@availity/mui-link";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Breadcrumbs = ({
+  active,
+  children,
+  crumbs,
+  emptyState = "...",
+  homeUrl = "/public/apps/dashboard",
+  ...rest
+}) => {
+  const renderBreadCrumb = ({ name = emptyState, url }) => {
+    const props = {
+      "aria-label": name,
+      children: name
+    };
+    return url ? /* @__PURE__ */ jsx(Link, {
+      ...props,
+      href: url
+    }) : /* @__PURE__ */ jsx(Typography, {
+      ...props
+    });
+  };
+  return /* @__PURE__ */ jsxs(MuiBreadcrumbs, {
+    ...rest,
+    separator: /* @__PURE__ */ jsx(NavigateNextIcon, {
+      fontSize: "small"
+    }),
+    children: [
+      /* @__PURE__ */ jsx(Link, {
+        "aria-label": "Home",
+        href: homeUrl,
+        children: "Home"
+      }),
+      crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb)),
+      children,
+      /* @__PURE__ */ jsx(Typography, {
+        children: active || emptyState
+      })
+    ]
+  });
+};
+export {
+  Breadcrumbs
+};

package/introduction.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/Breadcrumbs/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

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

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@availity/mui-breadcrumbs",
+  "version": "0.1.0",
+  "description": "Availity MUI Breadcrumbs Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-breadcrumbs-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/breadcrumbs"
+  },
+  "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",
+    "bundlesize": "bundlesize",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^5.12.7",
+    "typescript": "^4.6.4"
+  },
+  "peerDependencies": {
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@availity/mui-icon": "^0.4.0",
+    "@availity/mui-link": "^0.1.0"
+  }
+}

package/project.json

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

package/src/index.ts

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

package/src/lib/Breadcrumbs.stories.tsx

@@ -0,0 +1,32 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Breadcrumbs, BreadcrumbsProps } from './Breadcrumbs';
+import { Link } from '@availity/mui-link';
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: 'Components/Breadcrumbs/Breadcrumbs',
+  component: Breadcrumbs,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Breadcrumbs: StoryObj<typeof Breadcrumbs> = {
+  render: (args: BreadcrumbsProps) => <Breadcrumbs {...args} />,
+  args: {
+    active: 'Current Page',
+    crumbs: [{ name: 'Previous Page', url: '#' }],
+  },
+};
+
+export const _BreadcrumbsChildren: StoryObj<typeof Breadcrumbs> = {
+  render: (args: BreadcrumbsProps) => (
+    <Breadcrumbs {...args}>
+      <Link href="">Previous Page</Link>
+    </Breadcrumbs>
+  ),
+  args: {
+    active: 'Current Page',
+  },
+};

package/src/lib/Breadcrumbs.test.tsx

@@ -0,0 +1,117 @@
+import { render } from '@testing-library/react';
+import { Breadcrumbs } from './Breadcrumbs';
+import { Link } from '@availity/mui-link';
+
+describe('Breadcrumbs', () => {
+  describe('rending with crumbs', () => {
+    test('should render successfully with crumbs', () => {
+      const { getByTestId } = render(
+        <Breadcrumbs
+          data-testid="testBreadcrumbs"
+          crumbs={[
+            { name: 'Grand Parent', url: '/grandparent' },
+            { name: 'Parent', url: '/grandparent/parent' },
+          ]}
+        />
+      );
+
+      const breadcrumbs = getByTestId('testBreadcrumbs').getElementsByClassName('MuiBreadcrumbs-li');
+
+      expect(breadcrumbs.length).toBe(4);
+
+      const homeBreadcrumb = breadcrumbs[0].getElementsByTagName('a')[0];
+      expect(homeBreadcrumb).toHaveAttribute('aria-label', 'Home');
+      expect(homeBreadcrumb).toHaveAttribute(
+        'href',
+        '/public/apps/home/#!/loadApp?appUrl=%2Fpublic%2Fapps%2Fdashboard'
+      );
+      expect(homeBreadcrumb).toHaveTextContent('Home');
+
+      const grandparentBreadcrumb = breadcrumbs[1].getElementsByTagName('a')[0];
+      expect(grandparentBreadcrumb).toHaveAttribute('aria-label', 'Grand Parent');
+      expect(grandparentBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fgrandparent');
+      expect(grandparentBreadcrumb).toHaveTextContent('Grand Parent');
+
+      const parentBreadcrumb = breadcrumbs[2].getElementsByTagName('a')[0];
+      expect(parentBreadcrumb).toHaveAttribute('aria-label', 'Parent');
+      expect(parentBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fgrandparent%2Fparent');
+      expect(parentBreadcrumb).toHaveTextContent('Parent');
+
+      const currentPageBreadcrumb = breadcrumbs[3].getElementsByTagName('p')[0];
+      expect(currentPageBreadcrumb).not.toHaveAttribute('aria-label');
+      expect(currentPageBreadcrumb).not.toHaveAttribute('href');
+      expect(currentPageBreadcrumb).toHaveTextContent('...');
+    });
+
+    test('should render successfully with children', () => {
+      const { getByTestId } = render(
+        <Breadcrumbs data-testid="testBreadcrumbs" children={<Link href="/custom/url">Custom Breadcrumb</Link>} />
+      );
+
+      const breadcrumbs = getByTestId('testBreadcrumbs').getElementsByClassName('MuiBreadcrumbs-li');
+
+      expect(breadcrumbs.length).toBe(3);
+
+      const homeBreadcrumb = breadcrumbs[0].getElementsByTagName('a')[0];
+      expect(homeBreadcrumb).toHaveAttribute('aria-label', 'Home');
+      expect(homeBreadcrumb).toHaveAttribute(
+        'href',
+        '/public/apps/home/#!/loadApp?appUrl=%2Fpublic%2Fapps%2Fdashboard'
+      );
+      expect(homeBreadcrumb).toHaveTextContent('Home');
+
+      const customBreadcrumb = breadcrumbs[1].getElementsByTagName('a')[0];
+      expect(customBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fcustom%2Furl');
+      expect(customBreadcrumb).toHaveTextContent('Custom Breadcrumb');
+
+      const currentPageBreadcrumb = breadcrumbs[2].getElementsByTagName('p')[0];
+      expect(currentPageBreadcrumb).not.toHaveAttribute('aria-label');
+      expect(currentPageBreadcrumb).not.toHaveAttribute('href');
+      expect(currentPageBreadcrumb).toHaveTextContent('...');
+    });
+
+    test('should render successfully with a combination of children and crumbs', () => {
+      const { getByTestId } = render(
+        <Breadcrumbs
+          data-testid="testBreadcrumbs"
+          children={<Link href="/custom/url">Custom Breadcrumb</Link>}
+          crumbs={[
+            { name: 'Grand Parent', url: '/grandparent' },
+            { name: 'Parent', url: '/grandparent/parent' },
+          ]}
+        />
+      );
+
+      const breadcrumbs = getByTestId('testBreadcrumbs').getElementsByClassName('MuiBreadcrumbs-li');
+
+      expect(breadcrumbs.length).toBe(5);
+
+      const homeBreadcrumb = breadcrumbs[0].getElementsByTagName('a')[0];
+      expect(homeBreadcrumb).toHaveAttribute('aria-label', 'Home');
+      expect(homeBreadcrumb).toHaveAttribute(
+        'href',
+        '/public/apps/home/#!/loadApp?appUrl=%2Fpublic%2Fapps%2Fdashboard'
+      );
+      expect(homeBreadcrumb).toHaveTextContent('Home');
+
+      const grandparentBreadcrumb = breadcrumbs[1].getElementsByTagName('a')[0];
+      expect(grandparentBreadcrumb).toHaveAttribute('aria-label', 'Grand Parent');
+      expect(grandparentBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fgrandparent');
+      expect(grandparentBreadcrumb).toHaveTextContent('Grand Parent');
+
+      const parentBreadcrumb = breadcrumbs[2].getElementsByTagName('a')[0];
+      expect(parentBreadcrumb).toHaveAttribute('aria-label', 'Parent');
+      expect(parentBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fgrandparent%2Fparent');
+      expect(parentBreadcrumb).toHaveTextContent('Parent');
+
+      const customBreadcrumb = breadcrumbs[3].getElementsByTagName('a')[0];
+      expect(customBreadcrumb).toHaveAttribute('href', '/public/apps/home/#!/loadApp?appUrl=%2Fcustom%2Furl');
+      expect(customBreadcrumb).toHaveTextContent('Custom Breadcrumb');
+
+      const currentPageBreadcrumb = breadcrumbs[4].getElementsByTagName('p')[0];
+      expect(currentPageBreadcrumb).not.toHaveAttribute('aria-label');
+      expect(currentPageBreadcrumb).not.toHaveAttribute('href');
+      expect(currentPageBreadcrumb).toHaveTextContent('...');
+    });
+  });
+});

package/src/lib/Breadcrumbs.tsx

@@ -0,0 +1,53 @@
+import { Breadcrumbs as MuiBreadcrumbs, BreadcrumbsProps as MuiBreadcrumbsProps, Typography } from '@mui/material';
+import { NavigateNextIcon } from '@availity/mui-icon';
+import { Link } from '@availity/mui-link';
+
+interface Crumb {
+  /** The name of the ancestor page. */
+  name: string;
+  /** The url for navigating to the ancestor page. */
+  url: string;
+}
+
+export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'> {
+  /** The name of the active page (the page the user is currently on). */
+  active?: string;
+  children?: React.ReactNode;
+  /** The ancestor pages. */
+  crumbs?: Crumb[];
+  /** The value to display when the active page or an ancestor does not have a value.
+   * @default ... */
+  emptyState?: string;
+  /** Url for the Home route.
+   * @default /public/apps/dashboard */
+  homeUrl?: string;
+}
+
+export const Breadcrumbs = ({
+  active,
+  children,
+  crumbs,
+  emptyState = '...',
+  homeUrl = '/public/apps/dashboard',
+  ...rest
+}: BreadcrumbsProps): JSX.Element => {
+  const renderBreadCrumb = ({ name = emptyState, url }: Crumb) => {
+    const props = {
+      'aria-label': name,
+      children: name,
+    };
+
+    return url ? <Link {...props} href={url} /> : <Typography {...props} />;
+  };
+
+  return (
+    <MuiBreadcrumbs {...rest} separator={<NavigateNextIcon fontSize="small" />}>
+      <Link aria-label="Home" href={homeUrl}>
+        Home
+      </Link>
+      {crumbs && crumbs.length > 0 && crumbs.map((crumb) => renderBreadCrumb(crumb))}
+      {children}
+      {<Typography>{active || emptyState}</Typography>}
+    </MuiBreadcrumbs>
+  );
+};

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"]
+}