feat: enhance Crontab Guru tool with interaction tracking and improved validation feedback

package-lock.json

@@ -4821,6 +4821,21 @@
         "node": ">= 6"
       }
     },
+    "node_modules/cron-validator": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/cron-validator/-/cron-validator-1.3.1.tgz",
+      "integrity": "sha512-C1HsxuPCY/5opR55G5/WNzyEGDWFVG+6GLrA+fW/sCTcP6A6NTjUP2AK7B8n2PyFs90kDG2qzwm8LMheADku6A==",
+      "license": "MIT"
+    },
+    "node_modules/cronstrue": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cronstrue/-/cronstrue-3.0.0.tgz",
+      "integrity": "sha512-acwNTPzndJUmfDmcUN2cpBH4EgVn30rg5BYDAP8n5ENPP8A3IH2Z0UbxaNjvCkKxccjtfsTVhF6d+eHhv/GK5g==",
+      "license": "MIT",
+      "bin": {
+        "cronstrue": "bin/cli.js"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",

src/pages/tools/time/crontab-guru/index.tsx

@@ -49,18 +49,27 @@ export default function CrontabGuru({
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
   const [isValid, setIsValid] = useState<boolean | null>(null);
+  const [hasInteracted, setHasInteracted] = useState<boolean>(false);
 
   const compute = (values: InitialValuesType, input: string) => {
-    setIsValid(validateCrontab(input));
+    if (hasInteracted) {
+      setIsValid(validateCrontab(input));
+    }
     setResult(main(input, values));
   };
 
   const handleExample = (expr: string) => {
     setInput(expr);
+    setHasInteracted(true);
     setIsValid(validateCrontab(expr));
     setResult(main(expr, initialValues));
   };
 
+  const handleInputChange = (val: string) => {
+    if (!hasInteracted) setHasInteracted(true);
+    setInput(val);
+  };
+
   const getGroups: GetGroupsType<InitialValuesType> | null = () => [];
 
   return (
@@ -71,7 +80,7 @@ export default function CrontabGuru({
         <>
           <ToolTextInput
             value={input}
-            onChange={setInput}
+            onChange={handleInputChange}
             placeholder="e.g. 35 16 * * 0-5"
           />
           <Stack direction="row" spacing={1} mt={1}>
@@ -90,12 +99,47 @@ export default function CrontabGuru({
         </>
       }
       resultComponent={
-        <>
+        <div style={{ position: 'relative', minHeight: 80 }}>
-          {isValid === false && (
+          {hasInteracted && isValid === false && (
-            <Alert severity="error">Invalid crontab expression.</Alert>
+            <div
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                height: '100%',
+                zIndex: 2,
+                pointerEvents: 'auto',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                background: 'transparent'
+              }}
+            >
+              <Alert
+                severity="error"
+                style={{
+                  width: '80%',
+                  opacity: 0.85,
+                  textAlign: 'center',
+                  pointerEvents: 'none'
+                }}
+              >
+                Invalid crontab expression.
+              </Alert>
+            </div>
           )}
-          <ToolTextResult value={result} />
+          <div
-        </>
+            style={{
+              filter: hasInteracted && isValid === false ? 'blur(1px)' : 'none',
+              transition: 'filter 0.2s'
+            }}
+          >
+            <ToolTextResult
+              value={hasInteracted && isValid === false ? '' : result}
+            />
+          </div>
+        </div>
       }
       initialValues={initialValues}
       exampleCards={exampleCards}