@availity/mui-progress 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2023-11-14)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.7.2`
+* `mui-typography` updated to version `0.1.4`
+
+### Features
+
+* **mui-progress:** initial commit ([0012911](https://github.com/Availity/element/commit/00129117d2107d4bdf97a3767119d30ae2edb418))

package/README.md

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

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import { CircularProgressProps as CircularProgressProps$1 } from '@mui/material';
+
+interface CircularProgressProps extends Omit<CircularProgressProps$1, 'disableShrink' | 'thickness' | 'variant'> {
+    /**@default 'primary' */
+    color?: 'primary' | 'inherit';
+    /** If `true` the the loading animation is replaced with Error Icon and the words "Loading error" display.
+     * @default false
+     */
+    error?: boolean;
+    /** If `true` the the loading animation is replaced with Success Icon and the words "Loading successful" display. Note: This is overridden by the `error` prop.
+     * @default false
+     */
+    success?: boolean;
+    /** If `true` the  word "Loading" displays beneath the icon
+     * @default true
+     */
+    loadingCaption?: boolean;
+    /** The size of the component.
+     * @default 'default'
+     */
+    size?: 'default' | 'small';
+}
+type StatusIconProps = {
+    status: string;
+    size: 'default' | 'small';
+};
+declare const CircularProgress: ({ loadingCaption, error, success, size, ...props }: CircularProgressProps) => JSX.Element;
+
+export { CircularProgress, CircularProgressProps, StatusIconProps };

package/dist/index.js

@@ -0,0 +1,97 @@
+"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, {
+  CircularProgress: () => CircularProgress
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/CircularProgress.tsx
+var import_react = require("react");
+var import_material = require("@mui/material");
+var import_mui_icon = require("@availity/mui-icon");
+var import_mui_typography = require("@availity/mui-typography");
+var import_jsx_runtime = require("react/jsx-runtime");
+var StatusIcon = ({ status, size }) => {
+  const fontSize = size === "small" ? "medium" : "large";
+  switch (status) {
+    case "error":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.WarningCircleIcon, {
+        color: "error",
+        fontSize,
+        titleAccess: "loading error"
+      });
+    case "success":
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_icon.SuccessCircleIcon, {
+        color: "success",
+        fontSize,
+        titleAccess: "loading successful"
+      });
+    default:
+      return null;
+  }
+};
+var getCaptionText = (status) => ({
+  loading: "Loading",
+  error: "Loading error",
+  success: "Loading successful"
+})[status] || "";
+var CircularProgress = ({
+  loadingCaption = true,
+  error = false,
+  success = false,
+  size = "default",
+  ...props
+}) => {
+  const [status, setStatus] = (0, import_react.useState)("loading");
+  (0, import_react.useEffect)(() => {
+    if (error) {
+      setStatus("error");
+    } else if (success) {
+      setStatus("success");
+    } else {
+      setStatus("loading");
+    }
+  }, [error, success]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.Stack, {
+    width: "fit-content",
+    alignItems: "center",
+    children: [
+      status === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.CircularProgress, {
+        ...props,
+        size: size === "small" ? 24 : 40,
+        variant: "indeterminate"
+      }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusIcon, {
+        status,
+        size
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mui_typography.Typography, {
+        marginTop: "8px",
+        variant: "caption",
+        children: loadingCaption || error || success ? getCaptionText(status) : null
+      })
+    ]
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CircularProgress
+});

package/dist/index.mjs

@@ -0,0 +1,73 @@
+// src/lib/CircularProgress.tsx
+import { useEffect, useState } from "react";
+import {
+  CircularProgress as MuiCircularProgress,
+  Stack
+} from "@mui/material";
+import { SuccessCircleIcon, WarningCircleIcon } from "@availity/mui-icon";
+import { Typography } from "@availity/mui-typography";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StatusIcon = ({ status, size }) => {
+  const fontSize = size === "small" ? "medium" : "large";
+  switch (status) {
+    case "error":
+      return /* @__PURE__ */ jsx(WarningCircleIcon, {
+        color: "error",
+        fontSize,
+        titleAccess: "loading error"
+      });
+    case "success":
+      return /* @__PURE__ */ jsx(SuccessCircleIcon, {
+        color: "success",
+        fontSize,
+        titleAccess: "loading successful"
+      });
+    default:
+      return null;
+  }
+};
+var getCaptionText = (status) => ({
+  loading: "Loading",
+  error: "Loading error",
+  success: "Loading successful"
+})[status] || "";
+var CircularProgress = ({
+  loadingCaption = true,
+  error = false,
+  success = false,
+  size = "default",
+  ...props
+}) => {
+  const [status, setStatus] = useState("loading");
+  useEffect(() => {
+    if (error) {
+      setStatus("error");
+    } else if (success) {
+      setStatus("success");
+    } else {
+      setStatus("loading");
+    }
+  }, [error, success]);
+  return /* @__PURE__ */ jsxs(Stack, {
+    width: "fit-content",
+    alignItems: "center",
+    children: [
+      status === "loading" ? /* @__PURE__ */ jsx(MuiCircularProgress, {
+        ...props,
+        size: size === "small" ? 24 : 40,
+        variant: "indeterminate"
+      }) : /* @__PURE__ */ jsx(StatusIcon, {
+        status,
+        size
+      }),
+      /* @__PURE__ */ jsx(Typography, {
+        marginTop: "8px",
+        variant: "caption",
+        children: loadingCaption || error || success ? getCaptionText(status) : null
+      })
+    ]
+  });
+};
+export {
+  CircularProgress
+};

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/Progress/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@availity/mui-progress",
+  "version": "0.1.0",
+  "description": "Availity MUI Progress Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-progress-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/progress"
+  },
+  "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": {
+    "@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.7.2",
+    "@availity/mui-typography": "^0.1.4"
+  }
+}

package/project.json

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

package/src/index.ts

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

package/src/lib/CircularProgress.stories.tsx

@@ -0,0 +1,17 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { CircularProgress, CircularProgressProps } from './CircularProgress';
+
+const meta: Meta<typeof CircularProgress> = {
+  title: 'Components/Progress/Progress',
+  component: CircularProgress,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Progress: StoryObj<typeof CircularProgress> = {
+  render: (args: CircularProgressProps) => <CircularProgress {...args} />,
+  args: {},
+};

package/src/lib/CircularProgress.test.tsx

@@ -0,0 +1,54 @@
+import { render } from '@testing-library/react';
+import { CircularProgress } from './CircularProgress';
+
+describe('CircularProgress', () => {
+  test('should render loader successfully', () => {
+    const { getByText, getByRole } = render(<CircularProgress />);
+    expect(getByRole('progressbar')).toBeTruthy();
+    expect(getByText('Loading')).toBeTruthy();
+  });
+  describe('loadingCaption', () => {
+    test('should render loader successfully without Loading caption', () => {
+      const { queryByText } = render(<CircularProgress loadingCaption={false} />);
+      expect(queryByText('Loading')).not.toBeInTheDocument();
+    });
+    test('should render success but still have Loading successful caption', () => {
+      const { getByText } = render(<CircularProgress loadingCaption={false} success />);
+      expect(getByText('Loading successful')).toBeTruthy();
+    });
+    test('should render error but still have Loading successful caption', () => {
+      const { getByText } = render(<CircularProgress loadingCaption={false} error />);
+      expect(getByText('Loading error')).toBeTruthy();
+    });
+  });
+  describe('success', () => {
+    test('should render success icon successfully', () => {
+      const { queryByText, queryByRole, getByTitle, getByText } = render(<CircularProgress success />);
+      expect(queryByRole('progressbar')).not.toBeInTheDocument();
+      expect(queryByText('Loading')).not.toBeInTheDocument();
+      expect(getByTitle('loading successful')).toBeTruthy();
+      expect(getByText('Loading successful')).toBeTruthy();
+    });
+  });
+  describe('error', () => {
+    test('should render error icon successfully', () => {
+      const { queryByText, queryByRole, getByTitle, getByText } = render(<CircularProgress error />);
+      expect(queryByRole('progressbar')).not.toBeInTheDocument();
+      expect(queryByText('Loading')).not.toBeInTheDocument();
+      expect(getByTitle('loading error')).toBeTruthy();
+      expect(getByText('Loading error')).toBeTruthy();
+    });
+
+    test('should override success icon successfully', () => {
+      const { queryByText, queryByRole, queryByTitle, getByTitle, getByText } = render(
+        <CircularProgress success error />
+      );
+      expect(queryByRole('progressbar')).not.toBeInTheDocument();
+      expect(queryByText('Loading')).not.toBeInTheDocument();
+      expect(getByTitle('loading error')).toBeTruthy();
+      expect(getByText('Loading error')).toBeTruthy();
+      expect(queryByTitle('loading successful')).not.toBeInTheDocument();
+      expect(queryByText('Loading successful')).not.toBeInTheDocument();
+    });
+  });
+});

package/src/lib/CircularProgress.tsx

@@ -0,0 +1,88 @@
+import { useEffect, useState } from 'react';
+import {
+  CircularProgress as MuiCircularProgress,
+  CircularProgressProps as MuiCircularProgressProps,
+  Stack,
+} from '@mui/material';
+import { SuccessCircleIcon, WarningCircleIcon } from '@availity/mui-icon';
+import { Typography } from '@availity/mui-typography';
+
+export interface CircularProgressProps
+  extends Omit<MuiCircularProgressProps, 'disableShrink' | 'thickness' | 'variant'> {
+  /**@default 'primary' */
+  color?: 'primary' | 'inherit';
+  /** If `true` the the loading animation is replaced with Error Icon and the words "Loading error" display.
+   * @default false
+   */
+  error?: boolean;
+  /** If `true` the the loading animation is replaced with Success Icon and the words "Loading successful" display. Note: This is overridden by the `error` prop.
+   * @default false
+   */
+  success?: boolean;
+  /** If `true` the  word "Loading" displays beneath the icon
+   * @default true
+   */
+  loadingCaption?: boolean;
+  /** The size of the component.
+   * @default 'default'
+   */
+  size?: 'default' | 'small';
+}
+
+export type StatusIconProps = {
+  status: string;
+  size: 'default' | 'small';
+};
+
+const StatusIcon = ({ status, size }: StatusIconProps) => {
+  const fontSize = size === 'small' ? 'medium' : 'large';
+
+  switch (status) {
+    case 'error':
+      return <WarningCircleIcon color="error" fontSize={fontSize} titleAccess="loading error" />;
+    case 'success':
+      return <SuccessCircleIcon color="success" fontSize={fontSize} titleAccess="loading successful" />;
+    default:
+      return null;
+  }
+};
+
+const getCaptionText = (status: string) =>
+  ({
+    loading: 'Loading',
+    error: 'Loading error',
+    success: 'Loading successful',
+  }[status] || '');
+
+export const CircularProgress = ({
+  loadingCaption = true,
+  error = false,
+  success = false,
+  size = 'default',
+  ...props
+}: CircularProgressProps): JSX.Element => {
+  const [status, setStatus] = useState('loading');
+
+  useEffect(() => {
+    if (error) {
+      setStatus('error');
+    } else if (success) {
+      setStatus('success');
+    } else {
+      setStatus('loading');
+    }
+  }, [error, success]);
+
+  return (
+    <Stack width="fit-content" alignItems="center">
+      {status === 'loading' ? (
+        <MuiCircularProgress {...props} size={size === 'small' ? 24 : 40} variant="indeterminate" />
+      ) : (
+        <StatusIcon status={status} size={size} />
+      )}
+      <Typography marginTop="8px" variant="caption">
+        {loadingCaption || error || success ? getCaptionText(status) : null}
+      </Typography>
+    </Stack>
+  );
+};

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