build(eslint): limit comment line length (#1212)

* eslint comment plugin #1212
* add lintfix script #1214
* comment line length limit #1217
* multiline comment style #1218

.eslintrc

@@ -8,6 +8,7 @@
     "airbnb",
     "airbnb/hooks",
     "prettier",
+    "plugin:comment-length/recommended",
     "plugin:jest/recommended",
     "plugin:jsdoc/recommended"
   ],
@@ -55,6 +56,20 @@
     ],
     "class-methods-use-this": 1,
     "comma-dangle": 0,
+    "comment-length/limit-single-line-comments": [
+      "warn",
+      {
+        "maxLength": 120,
+        "logicalWrap": true
+      }
+    ],
+    "comment-length/limit-multi-line-comments": [
+      "warn",
+      {
+        "maxLength": 120,
+        "logicalWrap": true
+      }
+    ],
     "consistent-return": 1,
     "default-param-last": 0,
     "import/extensions": [
@@ -120,9 +135,15 @@
       "error",
       {
         "code": 240,
+        "comments": 120,
+        "ignoreComments": false,
         "ignoreUrls": true
       }
     ],
+    "multiline-comment-style": [
+      "warn",
+      "starred-block"
+    ],
     "no-case-declarations": 0,
     "no-console": 0,
     "no-continue": 0,

package.json

@@ -67,6 +67,7 @@
     "test:integration-ephemeral": "TZ=UTC jest ./tests --no-cache --testPathIgnorePatterns ./tests/dist.test.js",
     "test:integration-dev": "jest --roots=./tests --watch",
     "test:lint": "eslint --ext=json --ext=js --ext=jsx ./src",
+    "test:lintfix": "eslint --ext=json --ext=js --ext=jsx --fix ./src",
     "test:spell-support": "cspell ./README.md ./config/README.md ./CONTRIBUTING.md --config ./config/cspell.config.json",
     "test:spell": "cspell './public/locales/**/en*json' './src/**/*.js' --config ./config/cspell.config.json",
     "test:local": "jest --roots=./src --watch",
@@ -132,6 +133,7 @@
     "dotenv-webpack": "^8.0.1",
     "eslint": "8.50.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-plugin-comment-length": "^1.6.1",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jest": "^27.2.3",

src/common/README.md

@@ -279,14 +279,16 @@ Associated with running unit tests. See dotenv config files for activation.
 
 ### General~UI\_DEPLOY\_PATH\_PREFIX : <code>string</code>
 Apply a path prefix for routing.
-Typically associated with applying a "beta" path prefix. See dotenv config files for updating. See build scripts for generated prefix.
+Typically associated with applying a "beta" path prefix. See dotenv config files for updating.
+See build scripts for generated prefix.
 
 **Kind**: inner constant of [<code>General</code>](#Helpers.module_General)  
 <a name="Helpers.module_General..UI_DEPLOY_PATH_LINK_PREFIX"></a>
 
 ### General~UI\_DEPLOY\_PATH\_LINK\_PREFIX : <code>string</code>
 Patch for compensating for platform updates where a mismatch between "beta" and "preview" for redirects means
-that the same prefix can no longer be used for both additional remote resources and links. See build scripts for generated prefix.
+that the same prefix can no longer be used for both additional remote resources and links.
+See build scripts for generated prefix.
 
 **Kind**: inner constant of [<code>General</code>](#Helpers.module_General)  
 <a name="Helpers.module_General..UI_DISABLED"></a>

src/common/helpers.js

@@ -223,18 +223,21 @@ const TEST_MODE = process.env.REACT_APP_ENV === 'test';
 
 /**
  * Apply a path prefix for routing.
- * Typically associated with applying a "beta" path prefix. See dotenv config files for updating. See build scripts for generated prefix.
+ * Typically associated with applying a "beta" path prefix. See dotenv config files for updating.
+ * See build scripts for generated prefix.
  *
  * @type {string}
  */
 const UI_DEPLOY_PATH_PREFIX = process.env.REACT_APP_UI_DEPLOY_PATH_PREFIX;
 
 /**
- * FixMe: Replace, or alias towards UI_DEPLOY_PATH_PREFIX, this dotenv parameter if/when "beta" and "preview" are normalized.
+ * FixMe: Replace, or alias towards UI_DEPLOY_PATH_PREFIX, this dotenv parameter if/when "beta" and "preview" are
+ * normalized.
  */
 /**
  * Patch for compensating for platform updates where a mismatch between "beta" and "preview" for redirects means
- * that the same prefix can no longer be used for both additional remote resources and links. See build scripts for generated prefix.
+ * that the same prefix can no longer be used for both additional remote resources and links.
+ * See build scripts for generated prefix.
  *
  * @type {string}
  */

src/components/README.md

@@ -512,7 +512,7 @@ Set application messages for banner display
   </thead>
   <tbody>
 <tr>
-    <td>messages</td><td><code>Array.&lt;{id: string, message: string, title: string, variant: string}&gt;</code> | <code>Object</code></td>
+    <td>messages</td><td><code>Array</code> | <code>Object</code></td>
     </tr>  </tbody>
 </table>
 
@@ -1525,8 +1525,8 @@ Fix pf props inconsistency for dropdown button props.
 <a name="Form.module_Select..Select"></a>
 
 ### Select~Select(props) ⇒ <code>React.ReactNode</code>
-A wrapper for Pf Select, and emulator for Pf Dropdown. Provides consistent restructured event data for onSelect callback
-for both select and dropdown.
+A wrapper for Pf Select, and emulator for Pf Dropdown. Provides consistent restructured event data for onSelect
+callback for both select and dropdown.
 
 **Kind**: inner method of [<code>Select</code>](#Form.module_Select)  
 **Emits**: [<code>onDropdownSelect</code>](#event_onDropdownSelect), [<code>onSplitButton</code>](#event_onSplitButton), [<code>onToggle</code>](#event_onToggle)  
@@ -2279,7 +2279,8 @@ Get daily and monthly totals from a data set. A metric totals helper.
     </tr><tr>
     <td>params.dataSet</td><td><code>object</code></td><td></td>
     </tr><tr>
-    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed through &quot;graphCardMetricTotals&quot;</p>
+    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed through
+    &quot;graphCardMetricTotals&quot;</p>
 </td>
     </tr>  </tbody>
 </table>
@@ -2324,7 +2325,8 @@ Get a remaining capacity from data sets. A metric totals helper.
     </tr><tr>
     <td>params.tallyData</td><td><code>Array</code></td><td></td>
     </tr><tr>
-    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed through &quot;graphCardMetricTotals&quot;</p>
+    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed
+    through &quot;graphCardMetricTotals&quot;</p>
 </td>
     </tr>  </tbody>
 </table>
@@ -2349,7 +2351,8 @@ Get a remaining overage from data sets. A metric totals helper.
     </tr><tr>
     <td>params.tallyData</td><td><code>Array</code></td><td></td>
     </tr><tr>
-    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed through &quot;graphCardMetricTotals&quot;</p>
+    <td>params.isCurrent</td><td><code>boolean</code></td><td><p>Is the current value the &quot;current month&quot;. A proxy value passed through
+    &quot;graphCardMetricTotals&quot;</p>
 </td>
     </tr>  </tbody>
 </table>
@@ -2817,7 +2820,8 @@ See, https://react.i18next.com/
 </ul>
 </td>
     </tr><tr>
-    <td>components</td><td><code>Array</code></td><td></td><td><p>An array of HTML/React nodes used to replace string tokens. i.e. &quot;[<span />, &lt;React.Fragment /&gt;]&quot;</p>
+    <td>components</td><td><code>Array</code></td><td></td><td><p>An array of HTML/React nodes used to replace string tokens.
+    i.e. &quot;[<span />, &lt;React.Fragment /&gt;]&quot;</p>
 </td>
     </tr><tr>
     <td>settings</td><td><code>object</code></td><td></td><td></td>

src/components/bannerMessages/bannerMessagesContext.js

@@ -86,7 +86,7 @@ const useSetBannerMessages = ({
    * Set application messages for banner display
    *
    * @callback setBannerMessages
-   * @param {Array<{ id: string, message: string, title: string, variant: string }>|{ id: string, message: string, title: string, variant: string }} messages
+   * @param {Array|{ id: string, message: string, title: string, variant: string }} messages
    */
   return useCallback(
     messages => {

src/components/chart/chart.js

@@ -172,10 +172,10 @@ const Chart = ({
 /**
  * Prop types.
  *
- * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number, bottom: number,
- *     right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend: React.ReactNode|Function,
- *     yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean, xAxisLabelIncrement: number,
- *     yValueFormat: Function}}
+ * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number,
+ *     bottom: number, right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend:
+ *     React.ReactNode|Function, yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean,
+ *     xAxisLabelIncrement: number, yValueFormat: Function}}
  */
 Chart.propTypes = {
   chartLegend: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
@@ -227,10 +227,10 @@ Chart.propTypes = {
 /**
  * Default props.
  *
- * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number, bottom: number,
- *     right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend: React.ReactNode|Function,
- *     yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean, xAxisLabelIncrement: number,
- *     yValueFormat: Function}}
+ * @type {{chartTooltip: React.ReactNode|Function, xValueFormat: Function, padding: {top: number, left: number,
+ *     bottom: number, right: number}, xAxisTickFormat: Function, themeColor: string, chartLegend:
+ *     React.ReactNode|Function, yAxisTickFormat: Function, dataSets: Array, xAxisFixLabelOverlap: boolean,
+ *     xAxisLabelIncrement: number, yValueFormat: Function}}
  */
 Chart.defaultProps = {
   chartLegend: null,

src/components/form/select.js

@@ -265,8 +265,8 @@ const formatButtonParentProps = (formattedButtonProps = {}) => {
 };
 
 /**
- * A wrapper for Pf Select, and emulator for Pf Dropdown. Provides consistent restructured event data for onSelect callback
- * for both select and dropdown.
+ * A wrapper for Pf Select, and emulator for Pf Dropdown. Provides consistent restructured event data for onSelect
+ * callback for both select and dropdown.
  *
  * @fires onDropdownSelect
  * @fires onSplitButton
@@ -532,10 +532,11 @@ const Select = ({
 /**
  * Prop types.
  *
- * @type {{isFlipEnabled: boolean, toggleIcon: (React.ReactNode|Function), className: string, onSplitButton: Function, ariaLabel: string,
- *     onSelect: Function, isToggleText: boolean, isDropdownButton: boolean, maxHeight: number, buttonVariant: string, name: string,
- *     options: Array|object, selectedOptions: Array|number|string, variant: string, isInline: boolean, id: string, isDisabled: boolean,
- *     placeholder: string, position: string, splitButtonVariant: string, direction: string}}
+ * @type {{isFlipEnabled: boolean, toggleIcon: (React.ReactNode|Function), className: string, onSplitButton: Function,
+ *     ariaLabel: string, onSelect: Function, isToggleText: boolean, isDropdownButton: boolean, maxHeight: number,
+ *     buttonVariant: string, name: string, options: Array|object, selectedOptions: Array|number|string,
+ *     variant: string, isInline: boolean, id: string, isDisabled: boolean, placeholder: string, position: string,
+ *     splitButtonVariant: string, direction: string}}
  */
 Select.propTypes = {
   ariaLabel: PropTypes.string,
@@ -585,10 +586,10 @@ Select.propTypes = {
 /**
  * Default props.
  *
- * @type {{isFlipEnabled: boolean, toggleIcon: null, className: string, onSplitButton: Function, ariaLabel: string, onSelect: Function,
- *     isToggleText: boolean, isDropdownButton: boolean, maxHeight: null, buttonVariant: string, name: null, options: Array,
- *     selectedOptions: null, variant: SelectVariant.single, isInline: boolean, id: string, isDisabled: boolean, placeholder: string,
- *     position: string, splitButtonVariant: null, direction: string}}
+ * @type {{isFlipEnabled: boolean, toggleIcon: null, className: string, onSplitButton: Function, ariaLabel: string,
+ *     onSelect: Function, isToggleText: boolean, isDropdownButton: boolean, maxHeight: null, buttonVariant: string,
+ *     name: null, options: Array, selectedOptions: null, variant: SelectVariant.single, isInline: boolean, id: string,
+ *     isDisabled: boolean, placeholder: string, position: string, splitButtonVariant: null, direction: string}}
  */
 Select.defaultProps = {
   ariaLabel: 'Select option',

src/components/graphCard/graphCardChartLegend.js

@@ -192,8 +192,8 @@ GraphCardChartLegend.propTypes = {
 /**
  * Default props.
  *
- * @type {{datum: {dataSets: Array}, useProduct: Function, t: Function, useGraphCardContext: Function, useDispatch: Function,
- *     useSelectors: Function, chart: {hide: Function, toggle: Function, isToggled: Function}}}
+ * @type {{datum: {dataSets: Array}, useProduct: Function, t: Function, useGraphCardContext: Function,
+ *     useDispatch: Function, useSelectors: Function, chart: {hide: Function, toggle: Function, isToggled: Function}}}
  */
 GraphCardChartLegend.defaultProps = {
   chart: {

src/components/graphCard/graphCardHelpers.js

@@ -364,7 +364,8 @@ const getMetricTotalCurrentOrLastData = helpers.memo(
  *
  * @param {object} params
  * @param {object} params.dataSet
- * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed through "graphCardMetricTotals"
+ * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed through
+ *     "graphCardMetricTotals"
  * @returns {{chartId: string, metricId: string, monthlyHasData: boolean, dailyValue: number, dailyDate: string,
  *     monthlyValue: number, monthlyDate: string, dailyHasData: boolean}}
  */
@@ -416,7 +417,8 @@ const getPrepaidTallyCapacity = helpers.memo(
  * @param {object} params
  * @param {Array} params.capacityData
  * @param {Array} params.tallyData
- * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed through "graphCardMetricTotals"
+ * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed
+ *     through "graphCardMetricTotals"
  * @returns {{remainingCapacityHasData: boolean, remainingCapacity: number}}
  */
 const getRemainingCapacity = helpers.memo(
@@ -453,7 +455,8 @@ const getRemainingCapacity = helpers.memo(
  * @param {object} params
  * @param {Array} params.capacityData
  * @param {Array} params.tallyData
- * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed through "graphCardMetricTotals"
+ * @param {boolean} params.isCurrent Is the current value the "current month". A proxy value passed through
+ *     "graphCardMetricTotals"
  * @returns {{remainingOverage: number, remainingOverageHasData: boolean}}
  */
 const getRemainingOverage = helpers.memo(

src/components/i18n/i18nHelpers.js

@@ -171,7 +171,8 @@ const setI18nTestElement = ({ defaultTestId, testId }) => {
  *     - A default string if the key can't be found.
  *     - An object with i18next settings. i.e. "{ context: Array|string, testId: boolean|string|React.ReactNode }"
  *     - An array of objects (key/value) pairs used to replace string tokens. i.e. "[{ hello: 'world' }]"
- * @param {Array} components An array of HTML/React nodes used to replace string tokens. i.e. "[<span />, <React.Fragment />]"
+ * @param {Array} components An array of HTML/React nodes used to replace string tokens.
+ *     i.e. "[<span />, <React.Fragment />]"
  * @param {object} settings
  * @param {*} settings.i18next
  * @param {Function} settings.isDebug

src/components/inventoryCard/inventoryCardHelpers.js

@@ -71,6 +71,7 @@ const normalizeInventorySettings = ({ filters = [], guestFilters = [], settings
 };
 
 // ToDo: evaluate moving isWrap logic under the table component helpers
+
 // ToDo: evaluate a fallback "perPageDefault = 10" defined here
 /**
  * Parse an inventory API response against available filters, query parameters, and session values.
@@ -83,7 +84,8 @@ const normalizeInventorySettings = ({ filters = [], guestFilters = [], settings
  * @param {object} params.query
  * @param {object} params.session
  * @param {object} params.settings
- * @returns {{dataSetColumnHeaders: Array, resultsPerPage: number, resultsOffset: number, dataSetRows: Array, resultsCount: number}}
+ * @returns {{dataSetColumnHeaders: Array, resultsPerPage: number, resultsOffset: number, dataSetRows: Array,
+ *     resultsCount: number}}
  */
 const parseInventoryResponse = ({
   data = {},

src/components/inventoryGuests/inventoryGuests.js

@@ -41,8 +41,7 @@ const InventoryGuests = ({
 
   const onScroll = useAliasOnScroll({ id, numberOfGuests });
 
-  // ToDo: Review having the height be a calc value
-  // Include the table header
+  // ToDo: Review having the height be a calc value. Remember to include the table header
   let updatedHeight = (numberOfGuests + 1) * 42;
   updatedHeight = (updatedHeight < 275 && updatedHeight) || 275;
 

src/components/messageView/messageView.js

@@ -47,7 +47,8 @@ const MessageView = ({ children, icon, message, pageTitle, title }) => (
 /**
  * Prop types.
  *
- * @type {{children: React.ReactNode, icon: React.ReactNode|Function, message: string, pageTitle: string, title: string}}
+ * @type {{children: React.ReactNode, icon: React.ReactNode|Function, message: string, pageTitle: string,
+ *     title: string}}
  */
 MessageView.propTypes = {
   children: PropTypes.node,

src/components/optinView/optinView.js

@@ -202,7 +202,8 @@ const OptinView = ({
 /**
  * Prop types.
  *
- * @type {{useSession: Function, t: Function, updateAccountOptIn: Function, useDispatch: Function, useSelectorsResponse: Function}}
+ * @type {{useSession: Function, t: Function, updateAccountOptIn: Function, useDispatch: Function,
+ *     useSelectorsResponse: Function}}
  */
 OptinView.propTypes = {
   t: PropTypes.func,
@@ -215,7 +216,8 @@ OptinView.propTypes = {
 /**
  * Default props.
  *
- * @type {{useSession: Function, t: Function, updateAccountOptIn: Function, useDispatch: Function, useSelectorsResponse: Function}}
+ * @type {{useSession: Function, t: Function, updateAccountOptIn: Function, useDispatch: Function,
+ *     useSelectorsResponse: Function}}
  */
 OptinView.defaultProps = {
   t: translate,

src/components/table/table.js

@@ -413,9 +413,10 @@ const Table = ({
 /**
  * Prop types
  *
- * @type {{componentClassNames: object, summary: string, onSort: Function, onExpand: Function, className: string, isStriped: boolean,
- *     rows: Array, isBorders: boolean, ariaLabel: string, onSelect: Function, columnHeaders: Array, children: React.ReactNode,
- *     isHeader: boolean, variant: string, emptyTable: {className: string, title: React.ReactNode, message: React.ReactNode}}}
+ * @type {{componentClassNames: object, summary: string, onSort: Function, onExpand: Function, className: string,
+ *     isStriped: boolean, rows: Array, isBorders: boolean, ariaLabel: string, onSelect: Function, columnHeaders:
+ *     Array, children: React.ReactNode, isHeader: boolean, variant: string, emptyTable: {className: string, title:
+ *     React.ReactNode, message: React.ReactNode}}}
  */
 Table.propTypes = {
   ariaLabel: PropTypes.string,
@@ -487,11 +488,12 @@ Table.propTypes = {
 /**
  * Default props
  *
- * @type {{componentClassNames: {tdExpanded: string, trExpand: string, trExpandedContent: string, tdExpandedWrapper: string,
- *     tdAction: string, tdExpand: string, td: string, trExpanded: string, th: string, tdSelect: string, tdExpandedContent: string,
- *     table: string, tr: string}, summary: null, onSort: null, onExpand: null, className: string, isStriped: boolean, rows: any[],
- *     isBorders: boolean, ariaLabel: null, onSelect: null, columnHeaders: any[], children: null, isHeader: boolean,
- *     variant: TableVariant.compact, emptyTable: {title: string, message: string}}}
+ * @type {{componentClassNames: {tdExpanded: string, trExpand: string, trExpandedContent: string,
+ *     tdExpandedWrapper: string, tdAction: string, tdExpand: string, td: string, trExpanded: string, th: string,
+ *     tdSelect: string, tdExpandedContent: string, table: string, tr: string}, summary: null, onSort: null, onExpand:
+ *     null, className: string, isStriped: boolean, rows: any[], isBorders: boolean, ariaLabel: null, onSelect: null,
+ *     columnHeaders: any[], children: null, isHeader: boolean, variant: TableVariant.compact, emptyTable: {title:
+ *     string, message: string}}}
  */
 Table.defaultProps = {
   ariaLabel: null,