Clean up combobox component

Correct typo in date of v3.17.0

changelog.md

@@ -88,7 +88,7 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Thursday 01/30/2024 - v3.17.0
+### Thursday 01/30/2025 - v3.17.0
 
 {{taskList
 ##### 5e-Cleric

client/components/combobox.jsx

@@ -58,10 +58,10 @@ const Combobox = createClass({
 			this.props.onEntry(e);
 		});
 	},
-	handleSelect : function(e){
+	handleSelect : function(value, data=value){
 		this.setState({
-			value : e.currentTarget.getAttribute('data-value')
+			value : value
-		}, ()=>{this.props.onSelect(this.state.value);});
+		}, ()=>{this.props.onSelect(data);});
 		;
 	},
 	renderTextInput : function(){
@@ -82,6 +82,7 @@ const Combobox = createClass({
 						}
 					}}
 				/>
+				<i className='fas fa-caret-down'/>
 			</div>
 		);
 	},
@@ -92,11 +93,10 @@ const Combobox = createClass({
 			const filterOn = _.isString(this.props.autoSuggest.filterOn) ? [this.props.autoSuggest.filterOn] : this.props.autoSuggest.filterOn;
 			const filteredArrays = filterOn.map((attr)=>{
 				const children = dropdownChildren.filter((item)=>{
-					if(suggestMethod === 'includes'){
+					if(suggestMethod === 'includes')
 						return item.props[attr]?.toLowerCase().includes(this.state.value.toLowerCase());
-					} else if(suggestMethod === 'startsWith'){
+					if(suggestMethod === 'startsWith')
 						return item.props[attr]?.toLowerCase().startsWith(this.state.value.toLowerCase());
-					}
 				});
 				return children;
 			});
@@ -111,7 +111,7 @@ const Combobox = createClass({
 	},
 	render : function () {
 		const dropdownChildren = this.state.options.map((child, i)=>{
-			const clone = React.cloneElement(child, { onClick: (e)=>this.handleSelect(e) });
+			const clone = React.cloneElement(child, { onClick: ()=>this.handleSelect(child.props.value, child.props.data) });
 			return clone;
 		});
 		return (

client/components/combobox.less

@@ -1,50 +1,46 @@
 .dropdown-container {
 	position : relative;
-    input {
+	input { width : 100%; }
-        width: 100%;
+	.item i {
+		position : absolute;
+		right    : 10px;
+		color    : black;
 	}
 	.dropdown-options {
 		position         : absolute;
-        background-color: white;
 		z-index          : 100;
 		width            : 100%;
-        border: 1px solid gray;
-        overflow-y: auto;
 		max-height       : 200px;
+		overflow-y       : auto;
+		background-color : white;
+		border           : 1px solid gray;
 
-        &::-webkit-scrollbar {
+		&::-webkit-scrollbar { width : 14px; }
-          width: 14px;
+		&::-webkit-scrollbar-track { background : #FFFFFF; }
-        }
-        &::-webkit-scrollbar-track {
-          background: #ffffff;
-        }
 		&::-webkit-scrollbar-thumb {
 			background-color : #949494;
+			border           : 3px solid #FFFFFF;
 			border-radius    : 10px;
-          border: 3px solid #ffffff;
 		}
 
 		.item {
 			position    : relative;
-            font-size: 11px;
-            font-family: Open Sans;
 			padding     : 5px;
-            cursor: default;
 			margin      : 0 3px;
-            //border-bottom: 1px solid darkgray;
+			font-family : "Open Sans";
+			font-size   : 11px;
+			cursor      : default;
 			&:hover {
-                filter: brightness(120%);
 				background-color : rgb(163, 163, 163);
+				filter           : brightness(120%);
 			}
 			.detail {
 				width      : 100%;
-                text-align: left;
-                color: rgb(124, 124, 124);
-                font-style:italic;
 				font-size  : 9px;
+				font-style : italic;
+				color      : rgb(124, 124, 124);
+				text-align : left;
 			}
 		}
-
 	}
-
 }

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,6 +1,7 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
+import Markdown from 'naturalcrit/markdown.js';
 
 import Dialog from '../../../components/dialog.jsx';
 
@@ -40,11 +41,10 @@ const NotificationPopup = ()=>{
 
 	const renderNotificationsList = ()=>{
 		if(error) return <div className='error'>{error}</div>;
-
 		return notifications.map((notification)=>(
 			<li key={notification.dismissKey} >
 				<em>{notification.title}</em><br />
-				<p dangerouslySetInnerHTML={{ __html: notification.text }}></p>
+				<p dangerouslySetInnerHTML={{ __html: Markdown.render(notification.text) }}></p>
 			</li>
 		));
 	};

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -48,17 +48,46 @@
 	}
 	ul {
 		margin-top          : 15px;
-		font-size           : 0.8em;
+		font-size           : 0.9em;
 		list-style-position : outside;
 		list-style-type     : disc;
 		li {
-			margin-top  : 1.4em;
+			padding-left : 1em;
-			font-size   : 0.8em;
+			margin-top   : 1.5em;
-			line-height : 1.4em;
+			font-size    : 0.9em;
+			line-height  : 1.5em;
 			em {
-				text-transform:capitalize;
 				font-weight    : 800; 
+				text-transform : capitalize;
+			}
+			li {
+				margin-top      : 0;
+				line-height     : 1.2em; 
+				list-style-type : square;
 			}
 		}
+		ul ul,ol ol,ul ol,ol ul {
+			margin-bottom : 0px;
+			margin-left   : 1.5em;
+		}
+	}
+
+	/* Markdown styling */
+	code {
+		padding          : 0.1em 0.5em;
+		font-family      : 'Courier New', 'Courier', monospace;
+		overflow-wrap    : break-word;
+		white-space      : pre-wrap;
+		background       : #08115A;
+		border-radius    : 2px;
+	}
+	pre code {
+		display          : inline-block;
+		width            : 100%;
+	}
+	.blank {
+		height           : 1em;
+		margin-top       : 0;
+		& + * { margin-top : 0; }
 	}
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -244,9 +244,9 @@ const MetadataEditor = createClass({
 			return _.map(langCodes.sort(), (code, index)=>{
 				const localName = new Intl.DisplayNames([code], { type: 'language' });
 				const englishName = new Intl.DisplayNames('en', { type: 'language' });
-				return <div className='item' title={`${englishName.of(code)}`} key={`${index}`} data-value={`${code}`} data-detail={`${localName.of(code)}`}>
+				return <div className='item' title={englishName.of(code)} key={`${index}`} value={code} detail={localName.of(code)}>
-					{`${code}`}
+					{code}
-					<div className='detail'>{`${localName.of(code)}`}</div>
+					<div className='detail'>{localName.of(code)}</div>
 				</div>;
 			});
 		};
@@ -269,7 +269,7 @@ const MetadataEditor = createClass({
 					autoSuggest={{
 						suggestMethod           : 'startsWith',
 						clearAutoSuggestOnClick : true,
-						filterOn                : ['data-value', 'data-detail', 'title']
+						filterOn                : ['value', 'detail', 'title']
 					}}
 				>
 				</Combobox>

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -3,8 +3,8 @@ const dedent = require('dedent-tabs').default;
 const loginUrl = 'https://www.naturalcrit.com/login';
 
 // Prevent parsing text (e.g. document titles) as markdown
-const escape = (text) => {
+const escape = (text = '')=>{
-	return text.split('').map(char => `&#${char.charCodeAt(0)};`).join('');
+	return text.split('').map((char)=>`&#${char.charCodeAt(0)};`).join('');
 };
 
 //001-050 : Brew errors

package-lock.json

@@ -23,7 +23,7 @@
         "cors": "^2.8.5",
         "create-react-class": "^15.7.0",
         "dedent-tabs": "^0.10.3",
-        "dompurify": "^3.2.3",
+        "dompurify": "^3.2.4",
         "expr-eval": "^2.0.2",
         "express": "^4.21.2",
         "express-async-handler": "^1.2.0",
@@ -34,20 +34,20 @@
         "jwt-simple": "^0.5.6",
         "less": "^3.13.1",
         "lodash": "^4.17.21",
-        "marked": "11.2.0",
+        "marked": "13.0.3",
         "marked-emoji": "^1.4.3",
         "marked-extended-tables": "^1.1.0",
-        "marked-gfm-heading-id": "^3.2.0",
+        "marked-gfm-heading-id": "^4.0.1",
-        "marked-smartypants-lite": "^1.0.2",
+        "marked-smartypants-lite": "^1.0.3",
         "markedLegacy": "npm:marked@^0.3.19",
         "moment": "^2.30.1",
-        "mongoose": "^8.9.5",
+        "mongoose": "^8.9.6",
         "nanoid": "5.0.9",
         "nconf": "^0.12.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-frame-component": "^4.1.3",
-        "react-router": "^7.1.3",
+        "react-router": "^7.1.5",
         "sanitize-filename": "1.6.3",
         "superagent": "^10.1.1",
         "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
@@ -5313,9 +5313,10 @@
       }
     },
     "node_modules/dompurify": {
-      "version": "3.2.3",
+      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.2.4.tgz",
-      "integrity": "sha512-U1U5Hzc2MO0oW3DF+G9qYN0aT7atAou4AgI0XjWz061nyBPbdxkfdhfy5uMgGn6+oLFCfn44ZGbdDqCzVmlOWA==",
+      "integrity": "sha512-ysFSFEDVduQpyhzAob/kkuJjf5zWkZD8/A9ywSp1byueyuCfHamrCBa14/Oc2iiB0e51B+NpxSl5gmzn+Ms/mg==",
+      "license": "(MPL-2.0 OR Apache-2.0)",
       "optionalDependencies": {
         "@types/trusted-types": "^2.0.7"
       }
@@ -9788,9 +9789,9 @@
       }
     },
     "node_modules/marked": {
-      "version": "11.2.0",
+      "version": "13.0.3",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-11.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-13.0.3.tgz",
-      "integrity": "sha512-HR0m3bvu0jAPYiIvLUUQtdg1g6D247//lvcekpHO1WMvbwDlwSkZAX9Lw4F4YHE1T0HaaNve0tuAWuV1UJ6vtw==",
+      "integrity": "sha512-rqRix3/TWzE9rIoFGIn8JmsVfhiuC8VIQ8IdX5TfzmeBucdY05/0UlzKaw0eVtpcN/OdVFpBk7CjKGo9iHJ/zA==",
       "license": "MIT",
       "bin": {
         "marked": "bin/marked.js"
@@ -9816,24 +9817,24 @@
       }
     },
     "node_modules/marked-gfm-heading-id": {
-      "version": "3.2.0",
+      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-3.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/marked-gfm-heading-id/-/marked-gfm-heading-id-4.1.1.tgz",
-      "integrity": "sha512-Xfxpr5lXLDLY10XqzSCA9l2dDaiabQUgtYM9hw8yunyVsB/xYBRpiic6BOiY/EAJw1ik1eWr1ET1HKOAPZBhXg==",
+      "integrity": "sha512-EeQZieAQmsI6c2tWLx0ETd0VjPwLV8qi+HT0dIsfVMERm0rCIuXfRvZXJbo1SgUi++lmuR1LVY+QzgNiLNvVpw==",
       "license": "MIT",
       "dependencies": {
         "github-slugger": "^2.0.0"
       },
       "peerDependencies": {
-        "marked": ">=4 <13"
+        "marked": ">=13 <16"
       }
     },
     "node_modules/marked-smartypants-lite": {
-      "version": "1.0.2",
+      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/marked-smartypants-lite/-/marked-smartypants-lite-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/marked-smartypants-lite/-/marked-smartypants-lite-1.0.3.tgz",
-      "integrity": "sha512-cEANts+s3+gnTzXPvPT2z4V8NfbMEL9QooKUviug0DkaKkXQWrUwDAmFnQAkLSJCw2BQcD8YPDyxu0HJ3mg36w==",
+      "integrity": "sha512-OOL8cjFog8KtgUFpkihRu6G42Dz2QPOU4k2xfKmMJ0CdoX+BHBDmdesHUdoQKM0mlwTsRSU3shpMeM/LWuUokg==",
       "license": "MIT",
       "peerDependencies": {
-        "marked": ">=4 <12"
+        "marked": ">=4 <16"
       }
     },
     "node_modules/markedLegacy": {
@@ -10186,9 +10187,10 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "8.9.5",
+      "version": "8.9.6",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.9.5.tgz",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.9.6.tgz",
-      "integrity": "sha512-SPhOrgBm0nKV3b+IIHGqpUTOmgVL5Z3OO9AwkFEmvOZznXTvplbomstCnPOGAyungtRXE5pJTgKpKcZTdjeESg==",
+      "integrity": "sha512-ipLvXwNPVuuuq5H3lnSD0lpaRH3DlCoC6emnMVJvweTwxU29uxDJWxMsNpERDQt8JMvYF1HGVuTK+Id2BlQLCA==",
+      "license": "MIT",
       "dependencies": {
         "bson": "^6.10.1",
         "kareem": "2.6.3",
@@ -11608,9 +11610,10 @@
       "license": "MIT"
     },
     "node_modules/react-router": {
-      "version": "7.1.3",
+      "version": "7.1.5",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.3.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.1.5.tgz",
-      "integrity": "sha512-EezYymLY6Guk/zLQ2vRA8WvdUhWFEj5fcE3RfWihhxXBW7+cd1LsIiA3lmx+KCmneAGQuyBv820o44L2+TtkSA==",
+      "integrity": "sha512-8BUF+hZEU4/z/JD201yK6S+UYhsf58bzYIDq2NS1iGpwxSXDu7F+DeGSkIXMFBuHZB21FSiCzEcUb18cQNdRkA==",
+      "license": "MIT",
       "dependencies": {
         "@types/cookie": "^0.6.0",
         "cookie": "^1.0.1",

package.json

@@ -98,7 +98,7 @@
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.2.3",
+    "dompurify": "^3.2.4",
     "expr-eval": "^2.0.2",
     "express": "^4.21.2",
     "express-async-handler": "^1.2.0",
@@ -109,20 +109,20 @@
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "11.2.0",
+    "marked": "13.0.3",
     "marked-emoji": "^1.4.3",
     "marked-extended-tables": "^1.1.0",
-    "marked-gfm-heading-id": "^3.2.0",
+    "marked-gfm-heading-id": "^4.0.1",
-    "marked-smartypants-lite": "^1.0.2",
+    "marked-smartypants-lite": "^1.0.3",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.9.5",
+    "mongoose": "^8.9.6",
     "nanoid": "5.0.9",
     "nconf": "^0.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router": "^7.1.3",
+    "react-router": "^7.1.5",
     "sanitize-filename": "1.6.3",
     "superagent": "^10.1.1",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"

stylelint_plugins/declaration-block-multi-line-min-declarations.js

@@ -1,5 +1,5 @@
-const stylelint = require('stylelint');
+import stylelint  from 'stylelint';
-const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
+import { isNumber } from 'stylelint/lib/utils/validateTypes.mjs';
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-block-multi-line-min-declarations';
@@ -7,9 +7,8 @@ const messages = ruleMessages(ruleName, {
 	expected : (decls)=>`Rule with ${decls} declaration${decls == 1 ? '' : 's'} should be single line`,
 });
 
-
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
+	return (postcssRoot, postcssResult)=>{
-	return function lint(postcssRoot, postcssResult) {
 
 		const validOptions = validateOptions(
 			postcssResult,
@@ -20,26 +19,23 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		);
 
-		if(!validOptions) { //If the options are invalid, don't lint
+		if(!validOptions) //If the options are invalid, don't lint
 			return;
-		}
+
 		const isAutoFixing = Boolean(context.fix);
 
 		postcssRoot.walkRules((rule)=>{ //Iterate CSS rules
 
 			//Apply rule only if all children are decls (no further nested rules)
-			if(rule.nodes.length > primaryOption || !rule.nodes.every((node)=>node.type === 'decl')) {
+			if(rule.nodes.length > primaryOption || !rule.nodes.every((node)=>node.type === 'decl'))
 				return;
-			}
 
 			//Ignore if already one line
 			if(!rule.nodes.some((node)=>node.raws.before.includes('\n')) && !rule.raws.after.includes('\n'))
 				return;
 
 			if(isAutoFixing) { //We are in “fix” mode
-				rule.each((decl)=>{
+				rule.each((decl)=>decl.raws.before = ' ');
-					decl.raws.before = ' ';
-				});
 				rule.raws.after = ' ';
 			} else {
 				report({
@@ -52,7 +48,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
+ruleFunction.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

stylelint_plugins/declaration-colon-align.js

@@ -1,31 +1,28 @@
-const stylelint = require('stylelint');
+import stylelint from 'stylelint';
-
 const { report, ruleMessages, validateOptions } = stylelint.utils;
+
 const ruleName = 'naturalcrit/declaration-colon-align';
 const messages = ruleMessages(ruleName, {
 	expected : (rule)=>`Expected colons aligned within rule "${rule}"`,
 });
 
-
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
+	return (postcssRoot, postcssResult)=>{
-	return function lint(postcssRoot, postcssResult) {
 
 		const validOptions = validateOptions(
 			postcssResult,
 			ruleName,
 			{
 				actual   : primaryOption,
-				possible : [
+				possible : [true, false]
-					true,
-					false
-				]
 			}
 		);
 
-		if(!validOptions) { //If the options are invalid, don't lint
+		if(!validOptions) // If the options are invalid, don't lint
 			return;
-		}
+
 		const isAutoFixing = Boolean(context.fix);
+
 		postcssRoot.walkRules((rule)=>{ // Iterate CSS rules
 
 			let maxColonPos = 0;
@@ -36,13 +33,16 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 					return;
 
 				const colonPos = declaration.prop.length + declaration.raws.between.indexOf(':');
-				if(maxColonPos > 0 && colonPos != maxColonPos) {
+
+				if(maxColonPos > 0 && colonPos != maxColonPos)
 					misaligned = true;
-				}
+
 				maxColonPos = Math.max(maxColonPos, colonPos);
 			});
 
-			if(misaligned) {
+			if(!misaligned)
+				return;
+
 			if(isAutoFixing) { // We are in “fix” mode
 				rule.each((declaration)=>{
 					if(declaration.type != 'decl')
@@ -59,10 +59,11 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 					word    : rule.selector, // Which exact word caused the error? This positions the error properly
 				});
 			}
-			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
+ruleFunction.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);

stylelint_plugins/declaration-colon-min-space-before.js

@@ -1,5 +1,5 @@
-const stylelint = require('stylelint');
+import stylelint  from 'stylelint';
-const { isNumber } = require('stylelint/lib/utils/validateTypes.cjs');
+import { isNumber } from 'stylelint/lib/utils/validateTypes.mjs';
 
 const { report, ruleMessages, validateOptions } = stylelint.utils;
 const ruleName = 'naturalcrit/declaration-colon-min-space-before';
@@ -7,9 +7,8 @@ const messages = ruleMessages(ruleName, {
 	expected : (num)=>`Expected at least ${num} space${num == 1 ? '' : 's'} before ":"`
 });
 
-
+const ruleFunction = (primaryOption, secondaryOptionObject, context)=>{
-module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOption, secondaryOptionObject, context) {
+	return (postcssRoot, postcssResult)=>{
-	return function lint(postcssRoot, postcssResult) {
 
 		const validOptions = validateOptions(
 			postcssResult,
@@ -30,9 +29,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			const between = decl.raws.between;
 			const colonIndex = between.indexOf(':');
 
-			if(between.slice(0, colonIndex).length >= primaryOption) {
+			if(between.slice(0, colonIndex).length >= primaryOption)
 				return;
-			}
+
 			if(isAutoFixing) { //We are in “fix” mode
 				decl.raws.between = between.slice(0, colonIndex).replace(/\s*$/, ' '.repeat(primaryOption)) + between.slice(colonIndex);
 			} else {
@@ -46,7 +45,9 @@ module.exports = stylelint.createPlugin(ruleName, function getPlugin(primaryOpti
 			}
 		});
 	};
-});
+};
 
-module.exports.ruleName = ruleName;
+ruleFunction.ruleName = ruleName;
-module.exports.messages = messages;
+ruleFunction.messages = messages;
+
+export default stylelint.createPlugin(ruleName, ruleFunction);