Merge branch 'main' into audio-feature-addition

src/components/input/ToolTextInput.tsx

@@ -7,11 +7,13 @@ import InputFooter from './InputFooter';
 export default function ToolTextInput({
   value,
   onChange,
-  title = 'Input text'
+  title = 'Input text',
+  placeholder
 }: {
   title?: string;
   value: string;
   onChange: (value: string) => void;
+  placeholder?: string;
 }) {
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -50,6 +52,7 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
+        placeholder={placeholder}
         sx={{
           '&.MuiTextField-root': {
             backgroundColor: 'background.paper'

src/pages/tools/time/crontab-guru/crontab-guru.service.test.ts

@@ -0,0 +1,26 @@
+import { expect, describe, it } from 'vitest';
+import { validateCrontab, explainCrontab } from './service';
+
+describe('crontab-guru service', () => {
+  it('validates correct crontab expressions', () => {
+    expect(validateCrontab('35 16 * * 0-5')).toBe(true);
+    expect(validateCrontab('* * * * *')).toBe(true);
+    expect(validateCrontab('0 12 1 * *')).toBe(true);
+  });
+
+  it('invalidates incorrect crontab expressions', () => {
+    expect(validateCrontab('invalid expression')).toBe(false);
+    expect(validateCrontab('61 24 * * *')).toBe(false);
+  });
+
+  it('explains valid crontab expressions', () => {
+    expect(explainCrontab('35 16 * * 0-5')).toMatch(/At 04:35 PM/);
+    expect(explainCrontab('* * * * *')).toMatch(/Every minute/);
+  });
+
+  it('returns error for invalid crontab explanation', () => {
+    expect(explainCrontab('invalid expression')).toMatch(
+      /Invalid crontab expression/
+    );
+  });
+});

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

@@ -0,0 +1,128 @@
+import { Alert } from '@mui/material';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { main, validateCrontab } from './service';
+
+const initialValues = {};
+
+type InitialValuesType = typeof initialValues;
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Every day at 16:35, Sunday to Friday',
+    description: 'At 16:35 on every day-of-week from Sunday through Friday.',
+    sampleText: '35 16 * * 0-5',
+    sampleResult: 'At 04:35 PM, Sunday through Friday',
+    sampleOptions: {}
+  },
+  {
+    title: 'Every minute',
+    description: 'Runs every minute.',
+    sampleText: '* * * * *',
+    sampleResult: 'Every minute',
+    sampleOptions: {}
+  },
+  {
+    title: 'Every 5 minutes',
+    description: 'Runs every 5 minutes.',
+    sampleText: '*/5 * * * *',
+    sampleResult: 'Every 5 minutes',
+    sampleOptions: {}
+  },
+  {
+    title: 'At 12:00 PM on the 1st of every month',
+    description: 'Runs at noon on the first day of each month.',
+    sampleText: '0 12 1 * *',
+    sampleResult: 'At 12:00 PM, on day 1 of the month',
+    sampleOptions: {}
+  }
+];
+
+export default function CrontabGuru({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  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) => {
+    if (hasInteracted) {
+      setIsValid(validateCrontab(input));
+    }
+    setResult(main(input, values));
+  };
+
+  const handleInputChange = (val: string) => {
+    if (!hasInteracted) setHasInteracted(true);
+    setInput(val);
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={
+        <ToolTextInput
+          value={input}
+          onChange={handleInputChange}
+          placeholder="e.g. 35 16 * * 0-5"
+        />
+      }
+      resultComponent={
+        <div style={{ position: 'relative', minHeight: 80 }}>
+          {hasInteracted && isValid === false && (
+            <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>
+          )}
+          <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}
+      getGroups={null}
+      setInput={setInput}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+    />
+  );
+}

src/pages/tools/time/crontab-guru/meta.ts

@@ -0,0 +1,24 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('time', {
+  name: 'Crontab explainer',
+  path: 'crontab-guru',
+  icon: 'mdi:calendar-clock',
+  description:
+    'Parse, validate, and explain crontab expressions in plain English.',
+  shortDescription: 'Crontab expression parser and explainer',
+  keywords: [
+    'crontab',
+    'cron',
+    'schedule',
+    'guru',
+    'time',
+    'expression',
+    'parser',
+    'explain'
+  ],
+  longDescription:
+    'Enter a crontab expression (like "35 16 * * 0-5") to get a human-readable explanation and validation. Useful for understanding and debugging cron schedules. Inspired by crontab.guru.',
+  component: lazy(() => import('./index'))
+});

src/pages/tools/time/crontab-guru/service.ts

@@ -0,0 +1,22 @@
+import cronstrue from 'cronstrue';
+import { isValidCron } from 'cron-validator';
+
+export function explainCrontab(expr: string): string {
+  try {
+    return cronstrue.toString(expr);
+  } catch (e: any) {
+    return `Invalid crontab expression: ${e.message}`;
+  }
+}
+
+export function validateCrontab(expr: string): boolean {
+  return isValidCron(expr, { seconds: false, allowBlankDay: true });
+}
+
+export function main(input: string, _options: any): string {
+  if (!input.trim()) return '';
+  if (!validateCrontab(input)) {
+    return 'Invalid crontab expression.';
+  }
+  return explainCrontab(input);
+}

src/pages/tools/time/index.ts

@@ -1,3 +1,4 @@
+import { tool as timeCrontabGuru } from './crontab-guru/meta';
 import { tool as timeBetweenDates } from './time-between-dates/meta';
 import { tool as daysDoHours } from './convert-days-to-hours/meta';
 import { tool as hoursToDays } from './convert-hours-to-days/meta';
@@ -11,5 +12,6 @@ export const timeTools = [
   convertSecondsToTime,
   convertTimetoSeconds,
   truncateClockTime,
-  timeBetweenDates
+  timeBetweenDates,
+  timeCrontabGuru
 ];