@availity/feedback 0.0.0-t325224b2 → 1.0.0

package/README.md

@@ -1,76 +1,25 @@
 # @availity/feedback
 
-> Availity feedback with simley faces react component.
+> Availity feedback with smiley faces react component.
 
-## Installation
+[![Version](https://img.shields.io/npm/v/@availity/feedback.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/feedback)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/feedback.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/feedback)
+[![Dependecy Status](https://img.shields.io/librariesio/release/npm/@availity/feedback?style=for-the-badge)](https://github.com/Availity/availity-react/blob/master/packages/feedback/package.json)
 
-```bash
-npm install @availity/feedback --save
-```
+## Installation
 
-### Usage
+### NPM
 
-```javascript
-import React from 'react';
-import Feedback from '@availity/feedback';
-// ... 
-<Feedback>
-  {/* ... */}
-</Feedback>
-// ...
+```bash
+npm install @availity/feedback
 ```
 
-#### Feedback (Default export)
-A component which does awesome things!
-
-##### Props
-
-- **`appName`**: String. Required. The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from.
-- **`formProps`**: Object. Optional. Props which will be passed to the underlying `FeedbackForm`. See the props for `FeedbackForm` below.
-- **`children`**: Text. Optional. The text which displays on the button. Default: `"Give Feedback"`
-- **`color`**: String. Optional. The color of the button. Default: `"light"`
-- **`outline`**: Boolean. Optional. Indicates if the button should use the "outline" styles or not. Default: `false`
-- **`prompt`**: String. Optional. Text which prompts/asks the user to provide feedback. Default: `"Tell us what you think about ${appName}."`
-- **`onFeedbackSent`**: Function. Optional. Callback for when the feedback is submitted. It will be called with the feedback object.
+### Yarn
 
-##### Usage
-
-```javascript
-import React from 'react';
-import Feedback from '@availity/feedback';
-// ... 
-<Feedback
-      appName="Payer Space"
-      prompt="Please provide some feedback"
-      color="primary"
-    >
-      Provide Feedback
-    </Feedback>
-// ...
+```bash
+yarn add @availity/feedback
 ```
 
-#### FeedbackForm
-
-This is the underlying form which is exposed in case you need to gather feedback inline.
-
-##### Props
-
-- **`name`**: String. Required. The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from.
-- **`formProps`**: Object. Optional. Props which will be passed to the underlying `FeedbackForm`. See the props for `FeedbackForm` below.
-- **`faceOptions`**: Array of Objects containing **`icon`** and **`description`**. Optional. Allows you to override the smiley face options which appear. Default: Smiley Face, Meh Face, and Frowny Face.
-- **`aboutOptions`**: Array of Objects containing **`value`** and **`label`**. Optional. Allows a dropdown displaying the options provided to let the uer indicate what the feedback is about.
-- **`prompt`**: String. Optional. Text which prompts/asks the user to provide feedback. Default: `"Tell us what you think about ${appName}."`
-- **`onFeedbackSent`**: Function. Optional. Callback for when the feedback is submitted. It will be called with the feedback object.
-
-##### Usage
+## Documentation
 
-```javascript
-import React from 'react';
-import { FeedbackForm } from '@availity/feedback';
-// ... 
-<FeedbackForm
-  name={text('Application Name', 'Payer Space')}
-  prompt={text('Prompt')}
-/>
-// ...
-```
+Check out more documentation at [availity.github.io](https://availity.github.io/availity-react/components/feedback/index)

package/index.d.ts

@@ -1,6 +1,3 @@
-import Feedback from './Feedback';
-import FeedbackForm from './FeedbackForm';
-
-export default Feedback;
-
-export { FeedbackForm };
+export { default } from './src/Feedback';
+export { default as FeedbackForm } from './src/FeedbackForm';
+export { default as FeedbackModal } from './src/FeedbackModal';

package/index.js

@@ -1,6 +1,3 @@
-import Feedback from './Feedback';
-import FeedbackForm from './FeedbackForm';
-
-export default Feedback;
-
-export { FeedbackForm };
+export { default } from './src/Feedback';
+export { default as FeedbackForm } from './src/FeedbackForm';
+export { default as FeedbackModal } from './src/FeedbackModal';

package/jest.config.js

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

package/package.json

@@ -1,41 +1,56 @@
 {
   "name": "@availity/feedback",
-  "version": "0.0.0-t325224b2",
-  "author": "Evan Sharp <evan.sharp@availity.com>",
-  "description": "Availity feedback with simley faces react component.",
-  "main": "index.js",
+  "version": "1.0.0",
+  "description": "Availity feedback with smiley faces react component.",
   "keywords": [
     "react",
-    "availity"
+    "availity",
+    "feedback"
   ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Availity/availity-react.git"
-  },
+  "homepage": "https://availity.github.io/availity-react/components/feedback/index",
   "bugs": {
     "url": "https://github.com/Availity/availity-react/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/availity-react.git",
+    "directory": "packages/feedback"
+  },
   "license": "MIT",
-  "publishConfig": {
-    "access": "public"
+  "author": "Evan Sharp <evan.sharp@availity.com>",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "prop-types": "^15.5.8"
+    "@availity/block-ui": "^1.0.0",
+    "@availity/form": "1.0.0",
+    "@availity/hooks": "1.0.0",
+    "@availity/icon": "0.1.0",
+    "@availity/native-form": "^6.0.0",
+    "@availity/select": "1.0.0",
+    "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@availity/api-axios": "^2.0.0",
-    "@availity/api-core": "^2.0.0",
-    "@availity/localstorage-core": "^1.4.0",
-    "axios": "^0.18.0",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.2",
-    "react-testing-library": "^5.4.4",
-    "reactstrap": "^6.0.0"
+    "@availity/api-axios": "^9.0.0",
+    "@availity/yup": "^6.0.0",
+    "axios": "^1.7.4",
+    "formik": "^2.4.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reactstrap": "^8.10.1"
   },
   "peerDependencies": {
-    "@availity/api-axios": "^2.0.0",
-    "react": "^16.3.0",
-    "reactstrap": "^5.0.0 || ^6.0.0"
+    "@availity/api-axios": "^8.0.0",
+    "@availity/yup": "^5.1.0",
+    "axios": "^1.7.4",
+    "formik": "^2.0.1",
+    "react": ">=16.3.0",
+    "reactstrap": "^8.0.0"
   },
-  "gitHead": "ca7f4108bea3ef671aada738d15a8628c495dd1d"
-}
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/project.json

@@ -0,0 +1,39 @@
+{
+  "name": "@availity/feedback",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "library",
+  "targets": {
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/feedback"],
+      "options": {
+        "jestConfig": "packages/feedback/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "angular",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "baseBranch": "master",
+        "trackDeps": true
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.yaml",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/feedback/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    }
+  }
+}

package/src/Feedback.d.ts

@@ -0,0 +1,25 @@
+import { DropdownProps } from 'reactstrap';
+
+export interface AnalyticsType {
+  [key: string]: any;
+  info: (data: any) => Promise<void>;
+}
+
+export interface FeedbackProps extends DropdownProps {
+  appName?: string;
+  modal?: boolean;
+  zIndex?: number | string;
+  outline?: boolean;
+  color?: string;
+  analytics?: AnalyticsType;
+  formProps?: { [key: string]: any };
+  prompt?: React.ReactType;
+  onFeedbackSent?: (feedback?: { [key: string]: any }) => void;
+  onModalOpenChange?: (isOpen: boolean) => void;
+  showSupport?: boolean;
+  supportZIndex?: number | string;
+}
+
+declare const Feedback: React.FC<FeedbackProps>;
+
+export default Feedback;

package/src/Feedback.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle } from 'reactstrap';
+import { avLogMessagesApiV2 } from '@availity/api-axios';
+import { useToggle } from '@availity/hooks';
+
+import FeedbackDropdown from './FeedbackDropdown';
+import FeedbackModal from './FeedbackModal';
+
+const Feedback = ({
+  appName,
+  modal = false,
+  zIndex,
+  supportZIndex,
+  children,
+  analytics = avLogMessagesApiV2,
+  className,
+  outline,
+  color = 'secondary',
+  formProps,
+  prompt,
+  onFeedbackSent,
+  showSupport = false,
+  onModalOpenChange,
+  ...props
+}) => {
+  const [feedbackIsOpen, feedbackToggle] = useToggle(false);
+
+  const handleFeedbackToggle = () => {
+    feedbackToggle();
+
+    if (onModalOpenChange) onModalOpenChange(!feedbackIsOpen);
+  };
+
+  return (
+    <Dropdown
+      isOpen={feedbackIsOpen && !modal}
+      toggle={handleFeedbackToggle}
+      className={`${className} hidden-print`}
+      {...props}
+    >
+      <DropdownToggle color={color} outline={outline}>
+        {children || (showSupport ? 'Feedback & Support' : 'Give Feedback')}
+      </DropdownToggle>
+      {modal ? (
+        <FeedbackModal
+          onFeedbackSent={onFeedbackSent}
+          prompt={prompt}
+          isOpen={feedbackIsOpen}
+          zIndex={zIndex}
+          toggle={handleFeedbackToggle}
+          name={appName}
+          analytics={analytics}
+          showSupport={showSupport}
+          supportZIndex={supportZIndex}
+          feedbackToggle={feedbackToggle}
+          {...formProps}
+        />
+      ) : (
+        <FeedbackDropdown
+          onFeedbackSent={onFeedbackSent}
+          feedbackToggle={feedbackToggle}
+          prompt={prompt}
+          analytics={analytics}
+          toggle={handleFeedbackToggle}
+          name={appName}
+          showSupport={showSupport}
+          supportZIndex={supportZIndex}
+          modal={modal}
+          {...formProps}
+        />
+      )}
+    </Dropdown>
+  );
+};
+
+Feedback.propTypes = {
+  analytics: PropTypes.shape({
+    info: PropTypes.func.isRequired,
+  }),
+  /** The name of the application this feedback is for. It is used in the API request to indicate where the feedback came from. */
+  appName: PropTypes.string,
+  /** Whether to open the FeedbackForm in a modal */
+  modal: PropTypes.bool,
+  /** Allows for overriding the z-indexvalue from react-strap Modalcomponent. */
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** Allows for overriding the z-index value from reactstrap Support Modal component. */
+  supportZIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /** The text to display on the submit button. */
+  children: PropTypes.node,
+  className: PropTypes.string,
+  /** Indicates if the button should use the "outline" styles or not. */
+  outline: PropTypes.bool,
+  /** The color of the button. Default: "light". */
+  color: PropTypes.string,
+  /** Props to be spread to the underlying FeedbackForm. See the FeedbackForm Props. */
+  formProps: PropTypes.object,
+  /** Text that prompts the user to provider feedback. Default: "Tell us what you think about ${appName}.". */
+  prompt: PropTypes.string,
+  /** Callback for when the feedback is submitted. It is called with the feedback object. */
+  onFeedbackSent: PropTypes.func,
+  onModalOpenChange: PropTypes.func,
+  /** Toggle whether or not to show the "Open a Support ticket" link in the FeedbackForm */
+  showSupport: PropTypes.bool,
+};
+
+export default Feedback;

package/{FeedbackButton.d.ts → src/FeedbackButton.d.ts}

@@ -2,7 +2,7 @@ export interface FeedbackButtonProps {
     onClick?: Function;
     icon?: string;
     active?: string;
-    children?: Node;
+    children?: React.ReactType;
 }
 
 declare const FeedbackButton: React.ComponentType<FeedbackButtonProps>;

package/src/FeedbackButton.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import { Button } from 'reactstrap';
+import Icon from '@availity/icon';
+
+const btnStyles = { fontSize: '1.4em', padding: '.2em .4em' };
+const iconStyles = { margin: '0px' };
+
+const FeedbackButton = ({ onClick, icon, active, children, iconSize = '', ...rest }) => (
+  <Button
+    style={btnStyles}
+    color={active === icon ? 'primary' : 'light'}
+    aria-pressed={active === icon}
+    onClick={() => {
+      onClick(icon);
+    }}
+    onKeyDown={({ keyCode }) => keyCode === 13 && onClick(icon)}
+    {...rest}
+  >
+    <Icon data-testid="feedback-icon" name={icon} size={iconSize} style={iconStyles} />
+    <span className="sr-only">{children}</span>
+  </Button>
+);
+
+FeedbackButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.string,
+  active: PropTypes.string,
+  children: PropTypes.node,
+  iconSize: PropTypes.string,
+};
+
+export default FeedbackButton;

package/{Feedback.d.ts → src/FeedbackDropdown.d.ts}

@@ -5,10 +5,10 @@ export interface FeedbackProps {
     color?: string;
     outline?: boolean;
     formProps?: object;
-    children?: Node;
+    children?: React.ReactType;
     onFeedbackSent: Function;
 }
 
 declare const Feedback: React.StatelessComponent<FeedbackProps>;
 
-export default Feedback;
+export default Feedback;

package/src/FeedbackDropdown.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { DropdownMenu } from 'reactstrap';
+
+import FeedbackForm from './FeedbackForm';
+import SupportModal from './SupportModal';
+import SupportDropdown from './SupportDropdown';
+
+const dropdownStyles = { width: '550px', maxWidth: '90vw', padding: 0 };
+
+const FeedbackDropdown = ({
+  prompt,
+  toggle,
+  onFeedbackSent,
+  showSupport,
+  supportToggle,
+  supportZIndex,
+  modal,
+  feedbackToggle,
+  ...formProps
+}) => {
+  const [supportIsActive, setSupportIsActive] = React.useState(false);
+
+  let support = null;
+  if (supportIsActive) {
+    support = modal ? (
+      <SupportModal
+        toggle={supportToggle}
+        isOpen={supportIsActive}
+        setSupportIsActive={setSupportIsActive}
+        supportZIndex={supportZIndex}
+        feedbackToggle={feedbackToggle}
+      />
+    ) : (
+      <SupportDropdown toggle={supportToggle} setSupportIsActive={setSupportIsActive} feedbackToggle={feedbackToggle} />
+    );
+  }
+
+  const toRender = support || (
+    <FeedbackForm
+      onFeedbackSent={onFeedbackSent}
+      prompt={prompt}
+      onClose={toggle}
+      showSupport={showSupport}
+      setSupportIsActive={setSupportIsActive}
+      modal={modal}
+      {...formProps}
+    />
+  );
+
+  return (
+    <DropdownMenu right style={dropdownStyles} role="dialog" aria-labelledby="feedback-form-header" aria-modal="false">
+      {toRender}
+    </DropdownMenu>
+  );
+};
+
+FeedbackDropdown.propTypes = {
+  prompt: PropTypes.string,
+  toggle: PropTypes.func,
+  onFeedbackSent: PropTypes.func,
+  showSupport: PropTypes.bool,
+  supportToggle: PropTypes.func,
+  supportZIndex: PropTypes.string,
+  modal: PropTypes.bool,
+  feedbackToggle: PropTypes.func,
+};
+
+export default FeedbackDropdown;

package/src/FeedbackForm.d.ts

@@ -0,0 +1,31 @@
+import { ModalHeaderProps } from 'reactstrap';
+import { AnalyticsType } from './Feedback';
+
+type FaceOption = {
+  icon?: string;
+  description?: string;
+};
+
+type AboutOption = {
+  icon?: string;
+  label?: React.ReactNode;
+};
+
+export interface FeedbackFormProps {
+  name: string;
+  onFeedbackSent?: (feedback?: { [key: string]: any }) => void;
+  faceOptions?: FaceOption[];
+  aboutOptions?: AboutOption[];
+  aboutLabel?: string;
+  analytics?: AnalyticsType;
+  prompt?: string;
+  staticFields?: object;
+  modalHeaderProps?: ModalHeaderProps;
+  showSupport: boolean;
+  setSupportIsActive: Function;
+  autoFocusFeedbackButton?: boolean;
+}
+
+declare const FeedbackForm: React.FC<FeedbackFormProps>;
+
+export default FeedbackForm;