@availity/mui-feedback 0.1.0

package/dist/index.mjs

@@ -0,0 +1,552 @@
+// src/lib/Feedback.tsx
+import { useState } from "react";
+import { Popover } from "@availity/mui-popover";
+import { Button as Button2 } from "@availity/mui-button";
+import { Container, styled as styled3 } from "@mui/material";
+import { avLogMessagesApi } from "@availity/api-axios";
+
+// src/lib/FeedbackForm.tsx
+import { useEffect } from "react";
+import { TextField } from "@availity/mui-textfield";
+import { LoadingButton, Button } from "@availity/mui-button";
+import { ToggleButtonGroup, ToggleButton } from "@availity/mui-toggle-button";
+import { Grid, styled as styled2 } from "@mui/material";
+import { FaceFrownIcon, FaceNeutralIcon, FaceSmileIcon } from "@availity/mui-icon";
+
+// ../../node_modules/@availity/message-core/dist/index.mjs
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet = (obj, member, value, setter) => {
+  __accessCheck(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _lastId;
+var AvMessage = class {
+  constructor() {
+    __publicField(this, "subscribers", {});
+    __publicField(this, "getEventData", (event) => {
+      const isSameWindow = event.source === window;
+      if (!this.isEnabled || !event || !event.data || !event.origin || !event.source || !this.isDomain(event.origin)) {
+        return;
+      }
+      let { data } = event;
+      if (typeof data === "string") {
+        try {
+          data = JSON.parse(data);
+        } catch {
+        }
+      }
+      if (typeof data === "string") {
+        event = data;
+        data = void 0;
+      } else {
+        event = data && data.event || this.DEFAULT_EVENT;
+      }
+      const metadata = { isSameWindow };
+      this.onMessage(event, data, metadata);
+    });
+    __privateAdd(this, _lastId, 0);
+    this.isEnabled = true;
+    this.DEFAULT_EVENT = "avMessage";
+    this.DOMAIN = /https?:\/\/([\w-]+\.)?availity\.(com|net)/;
+    window.addEventListener("message", this.getEventData);
+  }
+  enabled(value) {
+    if (arguments.length > 0) {
+      this.isEnabled = !!value;
+    }
+    return this.isEnabled;
+  }
+  subscribe(event, callback, options) {
+    var _a;
+    if (!this.subscribers[event]) {
+      this.subscribers[event] = [];
+    }
+    __privateSet(this, _lastId, __privateGet(this, _lastId) + 1);
+    const id = __privateGet(this, _lastId);
+    const ignoreSameWindow = (_a = options == null ? void 0 : options.ignoreSameWindow) != null ? _a : true;
+    const subscriber = { id, callback, options: { ignoreSameWindow } };
+    this.subscribers[event].push(subscriber);
+    return () => {
+      this.subscribers[event] = this.subscribers[event].filter((subscriber2) => subscriber2.id !== id);
+    };
+  }
+  unsubscribe(event) {
+    delete this.subscribers[event];
+  }
+  unsubscribeAll() {
+    this.subscribers = {};
+  }
+  onMessage(event, data, metadata) {
+    const { isSameWindow } = metadata;
+    if (this.subscribers[event]) {
+      for (const subscriber of this.subscribers[event]) {
+        const { ignoreSameWindow } = subscriber.options;
+        const skip = isSameWindow && ignoreSameWindow;
+        if (!skip) {
+          subscriber.callback(data);
+        }
+      }
+    }
+  }
+  isDomain(url) {
+    return !this.DOMAIN.test(this.domain()) || this.DOMAIN.test(url);
+  }
+  domain() {
+    if (window.location.origin) {
+      return window.location.origin;
+    }
+    if (window.location.hostname) {
+      return `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
+    }
+    return "*";
+  }
+  send(payload, target = window.top) {
+    if (!this.isEnabled || !payload) {
+      return;
+    }
+    try {
+      const message = typeof payload === "string" ? payload : JSON.stringify(payload);
+      target.postMessage(message, this.domain());
+    } catch (error) {
+      console.warn("AvMessage.send()", error);
+    }
+  }
+};
+_lastId = /* @__PURE__ */ new WeakMap();
+var AvMessage_default = AvMessage;
+var src_default = new AvMessage_default();
+
+// ../form-utils/src/lib/FieldHelpIcon.tsx
+import { HelpCircleIcon } from "@availity/mui-icon";
+import { IconButton } from "@availity/mui-button";
+import { jsx } from "react/jsx-runtime";
+var triggerFieldHelp = (id) => {
+  src_default.send({
+    event: "nav:help:field",
+    id
+  });
+};
+var FieldHelpIcon = ({ helpTopicId, labelId, sx, ...rest }) => {
+  return /* @__PURE__ */ jsx(IconButton, {
+    ...rest,
+    color: "primary",
+    title: "Help",
+    role: "link",
+    onClick: () => triggerFieldHelp(helpTopicId),
+    "aria-describedby": labelId,
+    size: "small",
+    sx: { ...sx, padding: 0.5, fontSize: "inherit", marginTop: "-2px", opacity: 1 },
+    children: /* @__PURE__ */ jsx(HelpCircleIcon, {
+      "aria-hidden": true,
+      titleAccess: void 0
+    })
+  });
+};
+
+// ../form-utils/src/lib/FormControlLabel.tsx
+import { forwardRef } from "react";
+import {
+  Box,
+  FormControlLabel as MuiFormControlLabel
+} from "@mui/material";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var FormControlLabel = forwardRef(({ helpTopicId, id, ...rest }, ref) => {
+  const labelId = id || (rest.htmlFor ? `${rest.htmlFor}-label` : void 0);
+  return /* @__PURE__ */ jsxs(Box, {
+    children: [
+      /* @__PURE__ */ jsx2(MuiFormControlLabel, {
+        id: labelId,
+        ...rest,
+        ref
+      }),
+      helpTopicId ? /* @__PURE__ */ jsx2(FieldHelpIcon, {
+        helpTopicId: "12345",
+        labelId
+      }) : null
+    ]
+  });
+});
+
+// ../form-utils/src/lib/FormHelperText.tsx
+import MuiFormHelperText from "@mui/material/FormHelperText";
+import { WarningTriangleIcon } from "@availity/mui-icon";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// ../form-utils/src/lib/FormLabel.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Box as Box2, FormLabel as MuiFormLabel, styled } from "@mui/material";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Children = styled("span", {
+  name: "MuiFormLabel",
+  slot: "Children",
+  overridesResolver: (props, styles) => styles.children
+})({});
+var StyleOverrides = {
+  position: "relative !important",
+  transform: "none !important",
+  transition: "none !important",
+  animation: "none !important"
+};
+var FormLabel = forwardRef2((props, ref) => {
+  const { children, helpTopicId, id, sx, ...rest } = props;
+  const labelId = id || (rest.htmlFor ? `${rest.htmlFor}-label` : void 0);
+  return /* @__PURE__ */ jsxs3(Box2, {
+    display: "flex",
+    flexDirection: "row",
+    sx,
+    children: [
+      /* @__PURE__ */ jsx4(MuiFormLabel, {
+        id: labelId,
+        sx: { ...StyleOverrides },
+        ...rest,
+        ref,
+        children: /* @__PURE__ */ jsx4(Children, {
+          className: "MuiFormLabel-children",
+          children
+        })
+      }),
+      helpTopicId ? /* @__PURE__ */ jsx4(FieldHelpIcon, {
+        helpTopicId,
+        labelId,
+        sx: { px: 0.5 }
+      }) : null
+    ]
+  });
+});
+
+// ../form-utils/src/lib/Input.tsx
+import MuiInput from "@mui/material/OutlinedInput";
+import InputAdornment from "@mui/material/InputAdornment";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var InputPropOverrides = {
+  notched: false
+};
+
+// ../form-utils/src/lib/Select.tsx
+import MuiSelect from "@mui/material/Select";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import { ExpandIcon } from "@availity/mui-icon";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var InnerEndAdornment = (args) => /* @__PURE__ */ jsxs4(Stack, {
+  ...args,
+  direction: "row",
+  spacing: 1,
+  height: "100%",
+  paddingY: ".5rem",
+  top: "unset!important",
+  children: [
+    /* @__PURE__ */ jsx6(Divider, {
+      orientation: "vertical"
+    }),
+    /* @__PURE__ */ jsx6(ExpandIcon, {
+      sx: { position: "relative", top: "calc(50% - .5rem)" }
+    })
+  ]
+});
+var SelectPropOverrides = {
+  IconComponent: InnerEndAdornment,
+  ...InputPropOverrides
+};
+
+// src/lib/FeedbackForm.tsx
+import { avRegionsApi } from "@availity/api-axios";
+import { useForm, Controller } from "react-hook-form";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var SmileButtons = styled2(ToggleButtonGroup, { name: "AvFeedbackContainer", slot: "SmileButtons" })({});
+var SmileButton = ({ disabled, Icon, label, value, ...props }) => /* @__PURE__ */ jsx7("div", {
+  children: /* @__PURE__ */ jsx7(ToggleButton, {
+    "aria-label": value,
+    value,
+    ...props,
+    disabled,
+    children: /* @__PURE__ */ jsx7(Icon, {
+      fontSize: "large"
+    })
+  })
+});
+var FeedbackForm = ({
+  analytics,
+  appName,
+  handleClose,
+  loading,
+  sent,
+  setLoading,
+  setSent
+}) => {
+  var _a;
+  const {
+    control,
+    formState: { errors },
+    handleSubmit,
+    register,
+    setValue,
+    watch
+  } = useForm();
+  const onSubmit = async ({ smileField, ...values }) => {
+    setLoading(true);
+    try {
+      const response = await avRegionsApi.getCurrentRegion();
+      await analytics.info({
+        surveyId: `${appName.replace(/\s/g, "_")}_Smile_Survey`,
+        smileLocation: `${appName}`,
+        smile: `icon-${smileField}`,
+        url: window.location.href,
+        region: response.data.regions[0] && response.data.regions[0].id,
+        userAgent: window.navigator.userAgent,
+        submitTime: new Date(),
+        ...values
+      });
+      setSent(true);
+      setLoading(false);
+    } catch {
+      setSent(false);
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (sent) {
+      setTimeout(() => {
+        handleClose();
+      }, 2e3);
+    }
+  }, [sent]);
+  const options = [
+    {
+      Icon: FaceSmileIcon,
+      label: "What do you like?",
+      value: "smile"
+    },
+    {
+      Icon: FaceNeutralIcon,
+      label: "What would you improve?",
+      value: "meh"
+    },
+    { Icon: FaceFrownIcon, label: "What don't you like?", value: "frown" }
+  ];
+  const getFeedbackLabel = () => {
+    const smile = watch("smileField");
+    const option = options.find((option2) => option2.value === smile);
+    return (option == null ? void 0 : option.label) || "What would you improve?";
+  };
+  if (!sent) {
+    return /* @__PURE__ */ jsxs5(Grid, {
+      component: "form",
+      container: true,
+      justifyContent: "center",
+      onSubmit: handleSubmit(onSubmit),
+      "aria-label": "Feedback Form",
+      "aria-describedby": "feedback-form-header",
+      children: [
+        /* @__PURE__ */ jsx7(Controller, {
+          control,
+          name: "smileField",
+          render: ({ field }) => {
+            return /* @__PURE__ */ jsx7(SmileButtons, {
+              children: options.map((props, index) => /* @__PURE__ */ jsx7(SmileButton, {
+                autoFocus: index === 0,
+                disabled: loading,
+                ...props
+              }, props.value)),
+              ...field,
+              "aria-labelledby": "feedback-form-header",
+              onChange: (event, value) => {
+                setValue(field.name, value);
+              },
+              size: "medium",
+              exclusive: true
+            });
+          }
+        }),
+        /* @__PURE__ */ jsx7(TextField, {
+          ...register("feedback", {
+            required: "This field is required",
+            maxLength: { value: 200, message: "This field must not exceed 200 characters" }
+          }),
+          fullWidth: true,
+          multiline: true,
+          minRows: 3,
+          maxRows: 3,
+          label: getFeedbackLabel(),
+          inputProps: { "aria-required": "true" },
+          InputLabelProps: {
+            component: FormLabel,
+            required: true
+          },
+          helperText: ((_a = errors.feedback) == null ? void 0 : _a.message) || "Max 200 characters",
+          error: !!errors.feedback,
+          disabled: loading
+        }),
+        /* @__PURE__ */ jsxs5(Grid, {
+          container: true,
+          direction: "row",
+          marginTop: "16px",
+          spacing: 1,
+          children: [
+            /* @__PURE__ */ jsx7(Grid, {
+              item: true,
+              xs: 6,
+              children: /* @__PURE__ */ jsx7(Button, {
+                color: "secondary",
+                disabled: loading,
+                fullWidth: true,
+                onClick: handleClose,
+                children: "Cancel"
+              })
+            }),
+            /* @__PURE__ */ jsx7(Grid, {
+              item: true,
+              xs: 6,
+              children: /* @__PURE__ */ jsx7(LoadingButton, {
+                disabled: !watch("smileField"),
+                fullWidth: true,
+                loading,
+                type: "submit",
+                variant: "contained",
+                children: "Send Feedback"
+              })
+            })
+          ]
+        })
+      ]
+    });
+  } else {
+    return null;
+  }
+};
+
+// src/lib/FeedbackHeader.tsx
+import { IconButton as IconButton2 } from "@availity/mui-button";
+import { CloseIcon } from "@availity/mui-icon";
+
+// ../typography/src/lib/Typography.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Typography as MuiTypography } from "@mui/material";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Typography = forwardRef3(
+  ({ children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx8(MuiTypography, {
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
+
+// src/lib/FeedbackHeader.tsx
+import { Grid as Grid2 } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+var FeedbackHeader = ({ appName, handleClose, loading, sent }) => {
+  return /* @__PURE__ */ jsxs6(Grid2, {
+    alignItems: "center",
+    container: true,
+    direction: "row",
+    marginBottom: !sent ? "8px" : "0px",
+    justifyContent: "space-between",
+    flexWrap: "nowrap",
+    id: "feedback-form-header",
+    children: [
+      /* @__PURE__ */ jsx9(Grid2, {
+        item: true,
+        whiteSpace: "normal",
+        children: /* @__PURE__ */ jsx9(Typography, {
+          component: "h2",
+          variant: "h5",
+          children: sent ? "Thank you for your feedback." : `Tell us what you think about ${appName}`
+        })
+      }),
+      /* @__PURE__ */ jsx9(Grid2, {
+        item: true,
+        marginRight: "-8px",
+        children: /* @__PURE__ */ jsx9(IconButton2, {
+          disabled: loading,
+          title: "Close",
+          onClick: handleClose,
+          children: /* @__PURE__ */ jsx9(CloseIcon, {})
+        })
+      })
+    ]
+  });
+};
+
+// src/lib/Feedback.tsx
+import { Fragment, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+var FeedbackContainer = styled3(Container, { name: "AvFeedbackContainer", slot: "root" })({});
+var Feedback = ({ analytics = avLogMessagesApi, appName }) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [sent, setSent] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const handlePopoverOpen = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handlePopoverClose = () => {
+    setAnchorEl(null);
+  };
+  const open = Boolean(anchorEl);
+  return /* @__PURE__ */ jsxs7(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx10(Button2, {
+        onClick: handlePopoverOpen,
+        color: "secondary",
+        size: "large",
+        children: "Give Feedback"
+      }),
+      /* @__PURE__ */ jsx10(Popover, {
+        anchorEl,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "right"
+        },
+        sx: { marginTop: "4px" },
+        disableRestoreFocus: true,
+        onClose: handlePopoverClose,
+        open,
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "right"
+        },
+        children: /* @__PURE__ */ jsxs7(FeedbackContainer, {
+          children: [
+            /* @__PURE__ */ jsx10(FeedbackHeader, {
+              appName,
+              handleClose: handlePopoverClose,
+              loading,
+              sent
+            }),
+            /* @__PURE__ */ jsx10(FeedbackForm, {
+              analytics,
+              appName,
+              handleClose: handlePopoverClose,
+              loading,
+              sent,
+              setLoading,
+              setSent
+            })
+          ]
+        })
+      })
+    ]
+  });
+};
+export {
+  Feedback
+};

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

package/jest.config.js

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

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@availity/mui-feedback",
+  "version": "0.1.0",
+  "description": "Availity MUI Feedback Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-feedback-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/feedback"
+  },
+  "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/api-axios": "^8.0.3",
+    "@availity/mui-button": "^0.5.1",
+    "@availity/mui-icon": "^0.7.3",
+    "@availity/mui-popover": "^0.1.1",
+    "@availity/mui-textfield": "^0.3.3",
+    "@availity/mui-toggle-button": "^0.1.6",
+    "react-hook-form": "^7.48.2"
+  }
+}

package/project.json

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

package/src/lib/Feedback.stories.tsx

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