feat: convert-days-to-hours (time tools)

.gitignore

@@ -41,3 +41,4 @@ yarn-error.log*
 
 dist.zip
 .aider*
+.qodo

src/pages/tools/time/convert-days-to-hours/convert-days-to-hours.service.test.ts

@@ -0,0 +1,15 @@
+import { expect, describe, it } from 'vitest';
+import { convertDaysToHours } from './service';
+
+describe('Convert Days to Hours', () => {
+  it('should convert days to hours correctly', () => {
+    expect(convertDaysToHours('2', false)).toBe('48');
+    expect(convertDaysToHours('0', false)).toBe('0');
+  });
+
+  it('should handle invalid input', () => {
+    expect(() => {
+      convertDaysToHours('abc', false);
+    }).toThrow('The day on line 1 contains non-digits, so we skip it.');
+  });
+});

src/pages/tools/time/convert-days-to-hours/index.tsx

@@ -0,0 +1,104 @@
+import { Box } 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 { GetGroupsType } from '@components/options/ToolOptions';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { convertDaysToHours } from './service';
+
+const initialValues = {
+  hoursFlag: false
+};
+type InitialValuesType = typeof initialValues;
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Full Days to Hours',
+    description:
+      'This example calculates how many hours there are in 1 day, in one week (7 days), in one month (30 days), and in even longer time periods. To see all the results at once, we enter each individual day value on a new line. We also use the "days" suffix in the input and add the "hours" suffix to the output.',
+    sampleText: `1 day 
+7 days
+30 days
+90 days
+125 days
+500 days`,
+    sampleResult: `24 hours
+168 hours
+720 hours
+2160 hours
+3000 hours
+12000 hours`,
+    sampleOptions: { hoursFlag: true }
+  },
+  {
+    title: 'Fractional Days to Hours',
+    description:
+      'In this example, we convert five decimal fraction day values to hours. Conversion of partial days is similar to the conversion of full days – they are all multiplied by 24. We turn off the option that appends the "hours" string after the converted values and get only the numerical hour values in the output.',
+    sampleText: `0.2 d
+1.5 days
+25.25
+9.999
+350.401`,
+    sampleResult: `4.8
+36
+606
+239.976
+8409.624`,
+    sampleOptions: { hoursFlag: false }
+  },
+  {
+    title: 'Number of Hours in a Year',
+    description:
+      'In the modern Gregorian calendar, a common year has 365 days and a leap year has 366 days. This makes the true average length of a year to be 365.242199 days. In this example, we load this number in the input field and convert it to the hours. It turns out that there 8765.812776 hours in an average year.',
+    sampleText: `365.242199 days`,
+    sampleResult: `8765.812776 hours`,
+    sampleOptions: { hoursFlag: true }
+  }
+];
+
+export default function ConvertDaysToHours({
+  title,
+  longDescription
+}: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (optionsValues: typeof initialValues, input: string) => {
+    setResult(convertDaysToHours(input, optionsValues.hoursFlag));
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> | null = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Hours Name',
+      component: (
+        <Box>
+          <CheckboxWithDesc
+            onChange={(val) => updateField('hoursFlag', val)}
+            checked={values.hoursFlag}
+            title={'Add Hours Name'}
+            description={'Append the string hours to output values'}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      input={input}
+      inputComponent={<ToolTextInput value={input} onChange={setInput} />}
+      resultComponent={<ToolTextResult value={result} />}
+      initialValues={initialValues}
+      exampleCards={exampleCards}
+      getGroups={getGroups}
+      compute={compute}
+      toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
+    />
+  );
+}

src/pages/tools/time/convert-days-to-hours/meta.ts

@@ -0,0 +1,14 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+
+export const tool = defineTool('time', {
+  path: 'convert-days-to-hours',
+  name: 'Convert Days to Hours',
+  icon: 'ri:24-hours-line',
+  description: 'A tool to convert days into hours.',
+  shortDescription: 'Convert days to hours easily.',
+  keywords: ['convert', 'days', 'hours'],
+  longDescription:
+    'This is a quick online utility for converting days to hours. One day is 24 hours and to convert days to hours, we simply do the multiplication operation: hours = days × 24. For example, 2 days is 2 × 24 = 48 hours and 5 days is 5 × 24 = 120 hours. You can convert not only full days to hours but also fractional day values. For example, 1.5 days is 1.5 × 24 = 36 hours and 4.6 days is 4.6 × 24 = 110.4 hours. You can enter multiple days in the input field (one value per line). In this case, they will all be computed in parallel and at once. The program also supports the postfix "days" or "d" for the input values and you can add the postfix "hours" to the output values. Timeabulous!',
+  component: lazy(() => import('./index'))
+});

src/pages/tools/time/convert-days-to-hours/service.ts

@@ -0,0 +1,25 @@
+import { containsOnlyDigits } from '@utils/string';
+
+function compute(input: string) {
+  if (!containsOnlyDigits(input)) {
+    return '';
+  }
+  const days = parseFloat(input);
+  const hours = days * 24;
+  return hours;
+}
+
+export function convertDaysToHours(input: string, hoursFlag: boolean): string {
+  const result: string[] = [];
+
+  const lines = input.split('\n');
+
+  lines.forEach((line) => {
+    const parts = line.split(' ');
+    const days = parts[0]; // Extract the number before the space
+    const hours = compute(days);
+    result.push(hoursFlag ? `${hours} hours` : `${hours}`);
+  });
+
+  return result.join('\n');
+}

src/pages/tools/time/index.ts

@@ -0,0 +1,3 @@
+import { tool as daysDoHours } from './convert-days-to-hours/meta';
+
+export const timeTools = [daysDoHours];

src/tools/defineTool.tsx

@@ -21,7 +21,8 @@ export type ToolCategory =
   | 'video'
   | 'list'
   | 'json'
-  | 'csv';
+  | 'csv'
+  | 'time';
 
 export interface DefinedTool {
   type: ToolCategory;

src/tools/index.ts

@@ -8,6 +8,7 @@ import { listTools } from '../pages/tools/list';
 import { Entries } from 'type-fest';
 import { jsonTools } from '../pages/tools/json';
 import { csvTools } from '../pages/tools/csv';
+import { timeTools } from '../pages/tools/time';
 import { IconifyIcon } from '@iconify/react';
 
 export const tools: DefinedTool[] = [
@@ -17,7 +18,8 @@ export const tools: DefinedTool[] = [
   ...listTools,
   ...csvTools,
   ...videoTools,
-  ...numberTools
+  ...numberTools,
+  ...timeTools
 ];
 const categoriesConfig: {
   type: ToolCategory;
@@ -73,6 +75,12 @@ const categoriesConfig: {
     icon: 'lets-icons:video-light',
     value:
       'Tools for working with videos – extract frames from videos, create GIFs from videos, convert videos to different formats, and much more.'
+  },
+  {
+    type: 'time',
+    icon: 'fluent-mdl2:date-time',
+    value:
+      'Tools for working with time and date – draw clocks and calendars, generate time and date sequences, calculate average time, convert between time zones, and much more.'
   }
 ];
 export const filterTools = (

src/utils/string.ts

@@ -5,7 +5,7 @@ export function capitalizeFirstLetter(string: string | undefined) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
-export function isNumber(number: any) {
+export function isNumber(number: any): boolean {
   return !isNaN(parseFloat(number)) && isFinite(number);
 }
 
@@ -37,3 +37,12 @@ export const replaceSpecialCharacters = (str: string) => {
 export function reverseString(input: string): string {
   return input.split('').reverse().join('');
 }
+
+/**
+ * Checks if the input string contains only digits.
+ * @param input - The string to validate.
+ * @returns True if the input contains only digits, false otherwise.
+ */
+export function containsOnlyDigits(input: string): boolean {
+  return /^\d+$/.test(input.trim());
+}