@availity/mui-dialog 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-02-08)
+
+### Dependency Updates
+
+* `mui-button` updated to version `0.6.1`
+* `mui-layout` updated to version `0.1.3`
+
+### Features
+
+* add dialog component ([ff151f0](https://github.com/Availity/element/commit/ff151f02d90114615f9beb635bea69989aa9a117))
+
+
+### Bug Fixes
+
+* **mui-dialog:** add tests ([765b491](https://github.com/Availity/element/commit/765b491bc5402c468a6ce5f9468e690ee884b816))
+* **mui-dialog:** add tests ([9396041](https://github.com/Availity/element/commit/93960416de25782f9f535cc2d99ac50672812706))

package/README.md

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

package/dist/index.d.ts

@@ -0,0 +1,32 @@
+import { DialogProps as DialogProps$1 } from '@mui/material/Dialog';
+import { DialogActionsProps as DialogActionsProps$1 } from '@mui/material/DialogActions';
+import { DialogContentProps as DialogContentProps$1 } from '@mui/material/DialogContent';
+import { DialogContentTextProps as DialogContentTextProps$1 } from '@mui/material/DialogContentText';
+import { DialogTitleProps as DialogTitleProps$1 } from '@mui/material/DialogTitle';
+
+type DialogProps = Omit<DialogProps$1, 'BackdropComponent' | 'BackdropProps' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'> & {
+    children?: React.ReactNode;
+};
+declare const Dialog: ({ children, ...rest }: DialogProps) => JSX.Element;
+
+interface DialogActionsProps extends DialogActionsProps$1 {
+    children?: React.ReactNode;
+}
+declare const DialogActions: ({ children, ...rest }: DialogActionsProps) => JSX.Element;
+
+interface DialogContentProps extends DialogContentProps$1 {
+    children?: React.ReactNode;
+}
+declare const DialogContent: ({ children, ...rest }: DialogContentProps) => JSX.Element;
+
+interface DialogContentTextProps extends DialogContentTextProps$1 {
+    children?: React.ReactNode;
+}
+declare const DialogContentText: ({ children, ...rest }: DialogContentTextProps) => JSX.Element;
+
+interface DialogTitleProps extends DialogTitleProps$1 {
+    children?: React.ReactNode;
+}
+declare const DialogTitle: ({ children, ...rest }: DialogTitleProps) => JSX.Element;
+
+export { Dialog, DialogActions, DialogActionsProps, DialogContent, DialogContentProps, DialogContentText, DialogContentTextProps, DialogProps, DialogTitle, DialogTitleProps };

package/dist/index.js

@@ -0,0 +1,93 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  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, {
+  Dialog: () => Dialog,
+  DialogActions: () => DialogActions,
+  DialogContent: () => DialogContent,
+  DialogContentText: () => DialogContentText,
+  DialogTitle: () => DialogTitle
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/Dialog.tsx
+var import_Dialog = __toESM(require("@mui/material/Dialog"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Dialog = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Dialog.default, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogActions.tsx
+var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogActions = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DialogActions.default, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogContent.tsx
+var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogContent = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DialogContent.default, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogContentText.tsx
+var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogContentText = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DialogContentText.default, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogTitle.tsx
+var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DialogTitle = ({ children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DialogTitle.default, {
+    ...rest,
+    children
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+});

package/dist/index.mjs

@@ -0,0 +1,56 @@
+// src/lib/Dialog.tsx
+import MuiDialog from "@mui/material/Dialog";
+import { jsx } from "react/jsx-runtime";
+var Dialog = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx(MuiDialog, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogActions.tsx
+import MuiDialogActions from "@mui/material/DialogActions";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DialogActions = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx2(MuiDialogActions, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogContent.tsx
+import MuiDialogContent from "@mui/material/DialogContent";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DialogContent = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx3(MuiDialogContent, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogContentText.tsx
+import MuiDialogContentText from "@mui/material/DialogContentText";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DialogContentText = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx4(MuiDialogContentText, {
+    ...rest,
+    children
+  });
+};
+
+// src/lib/DialogTitle.tsx
+import MuiDialogTitle from "@mui/material/DialogTitle";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DialogTitle = ({ children, ...rest }) => {
+  return /* @__PURE__ */ jsx5(MuiDialogTitle, {
+    ...rest,
+    children
+  });
+};
+export {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle
+};

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

package/jest.config.js

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

package/package.json

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

package/project.json

@@ -0,0 +1,42 @@
+{
+  "name": "mui-dialog",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/dialog/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "lintFilePatterns": ["packages/dialog/**/*.{js,ts}"],
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/dialog/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/dialog"],
+      "options": {
+        "jestConfig": "packages/dialog/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,5 @@
+export * from './lib/Dialog';
+export * from './lib/DialogActions';
+export * from './lib/DialogContent';
+export * from './lib/DialogContentText';
+export * from './lib/DialogTitle';

package/src/lib/Dialog.stories.tsx

@@ -0,0 +1,60 @@
+// Each exported component in the package should have its own stories file
+import { useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '@availity/mui-button';
+
+import { Dialog, DialogProps } from './Dialog';
+import { DialogActions } from './DialogActions';
+import { DialogContent } from './DialogContent';
+import { DialogContentText } from './DialogContentText';
+import { DialogTitle } from './DialogTitle';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog/Dialog',
+  component: Dialog,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Dialog: StoryObj<typeof Dialog> = {
+  render: (args: DialogProps) => {
+    const [open, setOpen] = useState(args.open);
+
+    useEffect(() => {
+      setOpen(args.open);
+    }, [args.open]);
+
+    const handleOpen = () => {
+      setOpen(true);
+    };
+
+    const handleClose = () => {
+      setOpen(false);
+    };
+
+    return (
+      <>
+        <Button onClick={handleOpen}>Open Dialog</Button>
+        <Dialog open={open} onClose={handleClose}>
+          <DialogTitle id="alert-dialog-title">Availity Dialog</DialogTitle>
+          <DialogContent>
+            <DialogContentText>{args.children}</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button onClick={handleClose} color="secondary">
+              Disagree
+            </Button>
+            <Button onClick={handleClose} autoFocus>
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    );
+  },
+  args: {
+    children: 'Here is some text in the dialog box.',
+    open: false,
+  },
+};

package/src/lib/Dialog.test.tsx

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

package/src/lib/Dialog.tsx

@@ -0,0 +1,12 @@
+import MuiDialog, { DialogProps as MuiDialogProps } from '@mui/material/Dialog';
+
+export type DialogProps = Omit<
+  MuiDialogProps,
+  'BackdropComponent' | 'BackdropProps' | 'PaperComponent' | 'PaperProps' | 'TransitionComponent' | 'TransitionProps'
+> & {
+  children?: React.ReactNode;
+};
+
+export const Dialog = ({ children, ...rest }: DialogProps): JSX.Element => {
+  return <MuiDialog {...rest}>{children}</MuiDialog>;
+};

package/src/lib/DialogActions.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Box } from '@availity/mui-layout';
+import { Button } from '@availity/mui-button';
+
+import { DialogActions, DialogActionsProps } from './DialogActions';
+
+const meta: Meta<typeof DialogActions> = {
+  title: 'Components/Dialog/DialogActions',
+  component: DialogActions,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _DialogActions: StoryObj<typeof DialogActions> = {
+  render: (args: DialogActionsProps) => (
+    <Box sx={{ maxWidth: '250px' }}>
+      <DialogActions {...args}>
+        <Button>Action Button</Button>
+      </DialogActions>
+    </Box>
+  ),
+  args: {},
+};

package/src/lib/DialogActions.test.tsx

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

package/src/lib/DialogActions.tsx

@@ -0,0 +1,9 @@
+import MuiDialogActions, { DialogActionsProps as MuiDialogActionsProps } from '@mui/material/DialogActions';
+
+export interface DialogActionsProps extends MuiDialogActionsProps {
+  children?: React.ReactNode;
+}
+
+export const DialogActions = ({ children, ...rest }: DialogActionsProps): JSX.Element => {
+  return <MuiDialogActions {...rest}>{children}</MuiDialogActions>;
+};

package/src/lib/DialogContent.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DialogContent, DialogContentProps } from './DialogContent';
+
+const meta: Meta<typeof DialogContent> = {
+  title: 'Components/Dialog/DialogContent',
+  component: DialogContent,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _DialogContent: StoryObj<typeof DialogContent> = {
+  render: (args: DialogContentProps) => <DialogContent {...args} />,
+  args: {
+    children: 'Modal Content Body',
+  },
+};

package/src/lib/DialogContent.test.tsx

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

package/src/lib/DialogContent.tsx

@@ -0,0 +1,9 @@
+import MuiDialogContent, { DialogContentProps as MuiDialogContentProps } from '@mui/material/DialogContent';
+
+export interface DialogContentProps extends MuiDialogContentProps {
+  children?: React.ReactNode;
+}
+
+export const DialogContent = ({ children, ...rest }: DialogContentProps): JSX.Element => {
+  return <MuiDialogContent {...rest}>{children}</MuiDialogContent>;
+};

package/src/lib/DialogContentText.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DialogContentText, DialogContentTextProps } from './DialogContentText';
+
+const meta: Meta<typeof DialogContentText> = {
+  title: 'Components/Dialog/DialogContentText',
+  component: DialogContentText,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _DialogContentText: StoryObj<typeof DialogContentText> = {
+  render: (args: DialogContentTextProps) => <DialogContentText {...args} />,
+  args: {
+    children: 'Modal Content Body',
+  },
+};

package/src/lib/DialogContentText.test.tsx

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

package/src/lib/DialogContentText.tsx

@@ -0,0 +1,11 @@
+import MuiDialogContentText, {
+  DialogContentTextProps as MuiDialogContentTextProps,
+} from '@mui/material/DialogContentText';
+
+export interface DialogContentTextProps extends MuiDialogContentTextProps {
+  children?: React.ReactNode;
+}
+
+export const DialogContentText = ({ children, ...rest }: DialogContentTextProps): JSX.Element => {
+  return <MuiDialogContentText {...rest}>{children}</MuiDialogContentText>;
+};

package/src/lib/DialogTitle.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DialogTitle, DialogTitleProps } from './DialogTitle';
+
+const meta: Meta<typeof DialogTitle> = {
+  title: 'Components/Dialog/DialogTitle',
+  component: DialogTitle,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _DialogTitle: StoryObj<typeof DialogTitle> = {
+  render: (args: DialogTitleProps) => <DialogTitle {...args} />,
+  args: {
+    children: 'Modal Title',
+  },
+};

package/src/lib/DialogTitle.test.tsx

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

package/src/lib/DialogTitle.tsx

@@ -0,0 +1,9 @@
+import MuiDialogTitle, { DialogTitleProps as MuiDialogTitleProps } from '@mui/material/DialogTitle';
+
+export interface DialogTitleProps extends MuiDialogTitleProps {
+  children?: React.ReactNode;
+}
+
+export const DialogTitle = ({ children, ...rest }: DialogTitleProps): JSX.Element => {
+  return <MuiDialogTitle {...rest}>{children}</MuiDialogTitle>;
+};

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