Dropping manual styling of invalid feedback sample and using group se…

…lector. misc updates. (#17) #skip

Skipping package publish (this change includes no impactful updates to the package).

demo/package.json

@@ -3,12 +3,12 @@
   "version": "4.3.0",
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/core": "^7.24.9",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@tailwindcss/typography": "^0.5.13",
-    "@tanstack/react-query": "^5.50.1",
+    "@tanstack/react-query": "^5.51.1",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -33,16 +33,16 @@
     "prismjs": "^1.29.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.24.1",
-    "rimraf": "^5.0.7",
+    "react-router-dom": "^6.25.0",
+    "rimraf": "^6.0.1",
     "source-map-loader": "^5.0.0",
     "style-loader": "^4.0.0",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.6",
     "terser-webpack-plugin": "^5.3.10",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.3",
     "web-vitals": "^4.2.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",

demo/src/FetchPage.tsx

@@ -31,10 +31,10 @@ export const FetchPage: FC<{ demo?: ReactNode, page?: string }> = ({ demo, page
 			setPages((old) => {
 				if (!old.find(o => o.name === cached.name)) {
 					return [...old, cached]
-				} return [...old]
+				}
+				return [...old]
 			})
-		}
-		else {
+		} else {
 			cached.loaded = new Date()
 		}
 		setHtml(cached.html)
@@ -51,7 +51,7 @@ export const FetchPage: FC<{ demo?: ReactNode, page?: string }> = ({ demo, page
 	useEffect(() => {
 		// debounce the fetch
 		const timeoutId = setTimeout(() => {
-			fetchContent(pageName).catch((e) => { console.error(e) })
+			fetchContent(pageName).catch(console.error)
 		}, 200)
 		return () => {
 			clearTimeout(timeoutId)

demo/src/bin/generate.mjs

@@ -18,8 +18,7 @@ async function begin(...args) {
 			const newName = file.replace(extname(file), '.html')
 			console.log(`Writing ${newName}`)
 			await writeFile(join(__dirname, '../../dist/content', newName), html, { encoding: 'utf8' })
-		}
-		catch (err) {
+		} catch (err) {
 			console.error(err)
 		}
 	}

demo/src/samples/InputDemo.tsx

@@ -24,8 +24,7 @@ export const InputDemo = () => {
 	const handleButton = () => {
 		if (refForm.current.checkValidity()) {
 			setSuccess(true)
-		}
-		else refForm.current.reportValidity()
+		} else refForm.current.reportValidity()
 	}
 
 	const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {

demo/src/samples/InvalidFeedback.tsx

@@ -18,8 +18,7 @@ const mapping: ErrorMapping = {
  * In this example, we render a text input field and apply custom onChange validation rules to treat it like a number.
  */
 export const Field: FC<{ name: string }> = ({ name }) => {
-	const { checkFieldError, setFieldError } = useFieldManager()
-	const fieldError = checkFieldError(name)
+	const { setFieldError } = useFieldManager()
 
 	// this change event invokes AFTER the field manager change handler; so the state should be updated with a value along with any validity state from the base input
 	const handleChange: FieldChangeEventHandler = (e) => {
@@ -38,7 +37,14 @@ export const Field: FC<{ name: string }> = ({ name }) => {
 		<>
 			<div className="form-control w-1/2">
 				<div className="indicator w-full">
-					<InputField name={name} required className={`input input-bordered w-full ${fieldError ? 'input-error' : ''}`} type="text" pattern="^[\d\.]+$" onChange={handleChange} />
+					<InputField
+						name={name}
+						required
+						className="input input-bordered w-full group-[.was-validated]/form:invalid:border-[red]"
+						type="text"
+						pattern="^[\d\.]+$"
+						onChange={handleChange}
+					/>
 					<InvalidFeedbackForField name={name} className="indicator-item badge badge-error" />
 				</div>
 				<label className="label">
@@ -77,25 +83,28 @@ export const Field: FC<{ name: string }> = ({ name }) => {
 /**
  * This example shows a simple input type="number" with min, max, and step validation
  */
-export const Field2: FC<{ name: string }> = ({ name }) => {
-	const { checkFieldError } = useFieldManager()
-	const fieldError = checkFieldError(name)
-
-	return (
-		<div className="form-control w-1/2">
-			<div className="indicator w-full">
-				<InputField name={name} required className={`input input-bordered w-full ${fieldError ? 'input-error' : ''}`} type="number" step="1" min="2" max="99" />
-				<InvalidFeedbackForField name={name} className="indicator-item badge badge-error" />
-			</div>
-			<label className="label">
-				<span className="label-text-alt">
-					Number input using min, max, and step validation. Required value:
-					<code>number &gt; 1 and &lt; 100, step: 1</code>
-				</span>
-			</label>
+export const Field2: FC<{ name: string }> = ({ name }) => (
+	<div className="form-control w-1/2">
+		<div className="indicator w-full">
+			<InputField
+				name={name}
+				required
+				className="input input-bordered w-full group-[.was-validated]/form:invalid:border-[red]"
+				type="number"
+				step="1"
+				min="2"
+				max="99"
+			/>
+			<InvalidFeedbackForField name={name} className="indicator-item badge badge-error" />
 		</div>
-	)
-}
+		<label className="label">
+			<span className="label-text-alt">
+				Number input using min, max, and step validation. Required value:
+				<code>number &gt; 1 and &lt; 100, step: 1</code>
+			</span>
+		</label>
+	</div>
+)
 
 export const ResetButton = () => {
 	const { reset } = useFieldManager()
@@ -113,7 +122,14 @@ export const InvalidFeedbackDemo = () => {
 		setSuccess(true)
 	}
 	return (
-		<FieldManager fields={{ field: '', field2: '' }} onValidSubmit={handleValidSubmit} onSubmit={handleSubmit} onReset={() => setSuccess(false)} errorMapping={mapping}>
+		<FieldManager
+			fields={{ field: '', field2: '' }}
+			onValidSubmit={handleValidSubmit}
+			onSubmit={handleSubmit}
+			onReset={() => setSuccess(false)}
+			errorMapping={mapping}
+			className="group/form" /** NOTE: this simplifies the selector to indicate and error; see line 86 */
+		>
 			<fieldset className="border p-5">
 				<legend>Invalid Feedback</legend>
 				<div className="flex flex-col gap-5">

demo/src/samples/UpstreamChangesPage.tsx

@@ -45,7 +45,17 @@ export const UpstreamChangesPage = () => {
 			<InputField placeholder="Director" name="director" type="text" className="input input-bordered" required />
 			<div className="flex gap-2">
 				<button type="reset" className="btn btn-info" onClick={() => refetch()}>Re-fetch</button>
-				<button type="reset" className="btn" onClick={() => { reset(); setSuccess(false) }}>Reset</button>
+				<button
+					type="reset"
+					className="btn"
+					onClick={() => {
+						reset()
+						setSuccess(false)
+					}}
+				>
+					Reset
+
+				</button>
 				{/*
 					NOTE: using holdBusyAfterSubmit on the FieldManager, which keeps the busy
 					status true until manually clearing it. This allows us to use the `isFormBusy` flag

demo/webpack.config.cjs

@@ -31,16 +31,15 @@ function buildConfig(argv) {
 		VERSION_HASH: process.env.GITHUB_SHA?.substring(0, 7)
 	}
 
-	let devtool; let plugins = []; let sourceMapLoader
+	let devtool, plugins = [], sourceMapLoader
 	if (!prodMode) {
 		devtool = 'source-map'
 		sourceMapLoader = {
 			test: /\.js$/,
 			enforce: 'pre',
 			use: ['source-map-loader']
 		}
-	}
-	else {
+	} else {
 		if (!CI) { // no bundle analyzer for a CI build
 			plugins = [new BundleAnalyzerPlugin({
 				openAnalyzer: false,

eslint.config.mjs

@@ -13,11 +13,18 @@ export default [
 		// all projects:
 		eslint.configs.recommended,
 		...tseslint.configs.recommended,
+		stylistic.configs.customize({
+			braceStyle: '1tbs',
+			commaDangle: 'never',
+			indent: 'tab',
+			jsx: true,
+			quotes: 'single',
+			semi: false
+		}),
 		{
 			plugins: {
-				'promise': promisePlugin,
-				'@stylistic': stylistic,
-				'react': reactPlugin
+				promise: promisePlugin,
+				react: reactPlugin
 			},
 			languageOptions: {
 				ecmaVersion: 2023,
@@ -29,35 +36,35 @@ export default [
 			},
 			rules: {
 				...promisePlugin.configs.recommended.rules,
-				...stylistic.configs['recommended-flat'].rules,
 				...reactPlugin.configs.recommended.rules,
 				...reactPlugin.configs['jsx-runtime'].rules,
 
 				// custom rules here
-				'@typescript-eslint/no-var-requires': 'off',
+				'promise/always-return': ['error', { ignoreLastCallback: true }],
 
 				'@typescript-eslint/no-explicit-any': 'off',
 				'@typescript-eslint/no-unused-vars': ['error', {
 					argsIgnorePattern: '^_',
 					varsIgnorePattern: '^_',
 					destructuredArrayIgnorePattern: '^_',
 					caughtErrorsIgnorePattern: '^_'
-				}],
-				'@stylistic/indent-binary-ops': ['error', 'tab'],
-				'@stylistic/no-tabs': ['error', { allowIndentationTabs: true }],
-				'@stylistic/indent': ['error', 'tab'],
-				'@stylistic/jsx-indent': ['error', 'tab'],
-				'@stylistic/jsx-indent-props': ['error', 'tab'],
-				'@stylistic/comma-dangle': ['error', 'never'],
-
-				'@stylistic/max-statements-per-line': 'off'
+				}]
 			},
 
 			settings: {
 				react: {
 					version: 'detect' // You can add this if you get a warning about the React version when you lint
 				}
 			}
+		},
+		{
+			files: ['**/*.test.ts', '**/*.test.tsx', '**/*.test.mts', '**/*.test.cts', '**/*.test.js'],
+			plugins: {
+				'@stylistic': stylistic
+			},
+			rules: {
+				'@stylistic/max-statements-per-line': 'off'
+			}
 		}
 	)
 

forms/package.json

@@ -45,10 +45,10 @@
     "npm-run-all": "^4.1.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rimraf": "^5.0.7",
+    "rimraf": "^6.0.1",
     "tslib": "^2.6.3",
     "typescript": "^5.5.3",
-    "vitest": "^1.6.0",
+    "vitest": "^2.0.3",
     "webpack-dev-server": "^5.0.4"
   },
   "peerDependencies": {

forms/src/useForwardRef.ts

@@ -13,8 +13,7 @@ export const useForwardRef = <T >(
 
 		if (typeof ref === 'function') {
 			ref(targetRef.current)
-		}
-		else {
+		} else {
 			ref.current = targetRef.current
 		}
 	}, [ref])

npm-version-helper.cjs

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require('node:fs')
 const path = require('node:path')