fix: misc

.idea/workspace.xml

@@ -6,30 +6,10 @@
   <component name="ChangeListManager">
     <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: translate userTypes">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/de/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/de/pdf.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/index.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/audio.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/audio.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/random-number-generator/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/random-number-generator/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/csv.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/csv.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/random-port-generator/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/random-port-generator/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/image.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/image.json" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/random-port-generator/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/random-port-generator/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/json.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/json.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/list.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/list.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/number.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/number.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/string.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/string.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/time.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/time.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/translation.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/translation.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/en/video.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/en/video.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/es/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/es/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/es/translation.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/es/translation.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/fr/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/fr/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/fr/time.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/fr/time.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/fr/translation.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/fr/translation.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/hi/json.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/hi/json.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/hi/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/hi/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/ja/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/ja/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/nl/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/nl/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/pt/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/pt/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/ru/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/ru/pdf.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/public/locales/zh/pdf.json" beforeDir="false" afterPath="$PROJECT_DIR$/public/locales/zh/pdf.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -63,7 +43,7 @@
     <option name="PUSH_AUTO_UPDATE" value="true" />
     <option name="RECENT_BRANCH_BY_REPOSITORY">
       <map>
-        <entry key="$PROJECT_DIR$" value="main" />
+        <entry key="$PROJECT_DIR$" value="fork/AshAnand34/tool/random-generators" />
       </map>
     </option>
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -346,7 +326,7 @@
     "Vitest.replaceText function (regexp mode).should return the original text when passed an invalid regexp.executor": "Run",
     "Vitest.replaceText function.executor": "Run",
     "Vitest.timeBetweenDates.executor": "Run",
-    "git-widget-placeholder": "#209 on fork/AshAnand34/tools-filtering",
+    "git-widget-placeholder": "#218 on fork/AshAnand34/tool/random-generators",
     "ignore.virus.scanning.warn.message": "true",
     "kotlin-language-version-configured": "true",
     "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools",
@@ -402,7 +382,7 @@
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\categories" />
     </key>
   </component>
-  <component name="RunManager" selected="npm.i18n:sync">
+  <component name="RunManager" selected="npm.dev">
     <configuration name="generatePassword" type="JavaScriptTestRunnerVitest" temporary="true" nameIsGenerated="true">
       <node-interpreter value="project" />
       <vitest-package value="$PROJECT_DIR$/node_modules/vitest" />
@@ -476,8 +456,8 @@
     </list>
     <recent_temporary>
       <list>
-        <item itemvalue="npm.i18n:sync" />
         <item itemvalue="npm.dev" />
+        <item itemvalue="npm.i18n:sync" />
         <item itemvalue="Vitest.generatePassword" />
         <item itemvalue="npm.i18n:pull" />
         <item itemvalue="npm.i18n:extract" />

src/pages/tools/number/index.ts

@@ -8,5 +8,7 @@ export const numberTools = [
   numberSum,
   numberGenerate,
   numberArithmeticSequence,
+  numberRandomPortGenerator,
+  numberRandomNumberGenerator,
   ...genericCalcTools
 ];

src/pages/tools/number/random-number-generator/index.tsx

@@ -1,10 +1,10 @@
-import { Box, Alert, Chip } from '@mui/material';
+import { Alert, Box } from '@mui/material';
 import { useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { GetGroupsType } from '@components/options/ToolOptions';
-import { generateRandomNumbers, validateInput, formatNumbers } from './service';
+import { formatNumbers, generateRandomNumbers, validateInput } from './service';
 import { InitialValuesType, RandomNumberResult } from './types';
 import { useTranslation } from 'react-i18next';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
@@ -24,7 +24,7 @@ export default function RandomNumberGenerator({
   title,
   longDescription
 }: ToolComponentProps) {
-  const { t } = useTranslation();
+  const { t } = useTranslation('number');
   const [result, setResult] = useState<RandomNumberResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [formattedResult, setFormattedResult] = useState<string>('');
@@ -55,7 +55,7 @@ export default function RandomNumberGenerator({
       setFormattedResult(formatted);
     } catch (err) {
       console.error('Random number generation failed:', err);
-      setError(t('number:randomNumberGenerator.error.generationFailed'));
+      setError(t('randomNumberGenerator.error.generationFailed'));
     }
   };
 
@@ -64,7 +64,7 @@ export default function RandomNumberGenerator({
     updateField
   }) => [
     {
-      title: t('number:randomNumberGenerator.options.range.title'),
+      title: t('randomNumberGenerator.options.range.title'),
       component: (
         <Box>
           <TextFieldWithDesc
@@ -73,7 +73,7 @@ export default function RandomNumberGenerator({
               updateField('minValue', parseInt(value) || 1)
             }
             description={t(
-              'number:randomNumberGenerator.options.range.minDescription'
+              'randomNumberGenerator.options.range.minDescription'
             )}
             inputProps={{
               type: 'number',
@@ -86,7 +86,7 @@ export default function RandomNumberGenerator({
               updateField('maxValue', parseInt(value) || 100)
             }
             description={t(
-              'number:randomNumberGenerator.options.range.maxDescription'
+              'randomNumberGenerator.options.range.maxDescription'
             )}
             inputProps={{
               type: 'number',
@@ -97,14 +97,14 @@ export default function RandomNumberGenerator({
       )
     },
     {
-      title: t('number:randomNumberGenerator.options.generation.title'),
+      title: t('randomNumberGenerator.options.generation.title'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.count.toString()}
             onOwnChange={(value) => updateField('count', parseInt(value) || 10)}
             description={t(
-              'number:randomNumberGenerator.options.generation.countDescription'
+              'randomNumberGenerator.options.generation.countDescription'
             )}
             inputProps={{
               type: 'number',
@@ -116,48 +116,48 @@ export default function RandomNumberGenerator({
 
           <CheckboxWithDesc
             title={t(
-              'number:randomNumberGenerator.options.generation.allowDecimals.title'
+              'randomNumberGenerator.options.generation.allowDecimals.title'
             )}
             checked={values.allowDecimals}
             onChange={(value) => updateField('allowDecimals', value)}
             description={t(
-              'number:randomNumberGenerator.options.generation.allowDecimals.description'
+              'randomNumberGenerator.options.generation.allowDecimals.description'
             )}
           />
 
           <CheckboxWithDesc
             title={t(
-              'number:randomNumberGenerator.options.generation.allowDuplicates.title'
+              'randomNumberGenerator.options.generation.allowDuplicates.title'
             )}
             checked={values.allowDuplicates}
             onChange={(value) => updateField('allowDuplicates', value)}
             description={t(
-              'number:randomNumberGenerator.options.generation.allowDuplicates.description'
+              'randomNumberGenerator.options.generation.allowDuplicates.description'
             )}
           />
 
           <CheckboxWithDesc
             title={t(
-              'number:randomNumberGenerator.options.generation.sortResults.title'
+              'randomNumberGenerator.options.generation.sortResults.title'
             )}
             checked={values.sortResults}
             onChange={(value) => updateField('sortResults', value)}
             description={t(
-              'number:randomNumberGenerator.options.generation.sortResults.description'
+              'randomNumberGenerator.options.generation.sortResults.description'
             )}
           />
         </Box>
       )
     },
     {
-      title: t('number:randomNumberGenerator.options.output.title'),
+      title: t('randomNumberGenerator.options.output.title'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.separator}
             onOwnChange={(value) => updateField('separator', value)}
             description={t(
-              'number:randomNumberGenerator.options.output.separatorDescription'
+              'randomNumberGenerator.options.output.separatorDescription'
             )}
             inputProps={{
               'data-testid': 'separator-input'
@@ -183,52 +183,17 @@ export default function RandomNumberGenerator({
           )}
 
           {result && (
-            <Box>
+            <ToolTextResult
-              <ToolTextResult
+              title={t('randomNumberGenerator.result.title')}
-                title={t('number:randomNumberGenerator.result.title')}
+              value={formattedResult}
-                value={formattedResult}
+            />
-              />
-
-              <Box sx={{ mt: 2, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-                <Chip
-                  label={`${t('number:randomNumberGenerator.result.range')}: ${
-                    result.min
-                  } - ${result.max}`}
-                  variant="outlined"
-                  color="primary"
-                />
-                <Chip
-                  label={`${t('number:randomNumberGenerator.result.count')}: ${
-                    result.count
-                  }`}
-                  variant="outlined"
-                  color="secondary"
-                />
-                {result.hasDuplicates && (
-                  <Chip
-                    label={t(
-                      'number:randomNumberGenerator.result.hasDuplicates'
-                    )}
-                    variant="outlined"
-                    color="warning"
-                  />
-                )}
-                {result.isSorted && (
-                  <Chip
-                    label={t('number:randomNumberGenerator.result.isSorted')}
-                    variant="outlined"
-                    color="success"
-                  />
-                )}
-              </Box>
-            </Box>
           )}
         </Box>
       }
       toolInfo={{
-        title: t('number:randomNumberGenerator.info.title'),
+        title: t('randomNumberGenerator.info.title'),
         description:
-          longDescription || t('number:randomNumberGenerator.info.description')
+          longDescription || t('randomNumberGenerator.info.description')
       }}
     />
   );

src/pages/tools/number/random-port-generator/index.tsx

@@ -1,22 +1,20 @@
-import { Box, Alert, Chip } from '@mui/material';
+import { Alert, Box } from '@mui/material';
 import { useState } from 'react';
 import ToolContent from '@components/ToolContent';
 import { ToolComponentProps } from '@tools/defineTool';
 import ToolTextResult from '@components/result/ToolTextResult';
 import { GetGroupsType } from '@components/options/ToolOptions';
 import {
-  generateRandomPorts,
-  validateInput,
   formatPorts,
+  generateRandomPorts,
   getPortRangeInfo,
-  isCommonPort,
+  validateInput
-  getPortService
 } from './service';
 import { InitialValuesType, RandomPortResult } from './types';
 import { useTranslation } from 'react-i18next';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
-import RadioWithTextField from '@components/options/RadioWithTextField';
+import SimpleRadio from '@components/options/SimpleRadio';
 
 const initialValues: InitialValuesType = {
   portRange: 'registered',
@@ -32,7 +30,7 @@ export default function RandomPortGenerator({
   title,
   longDescription
 }: ToolComponentProps) {
-  const { t } = useTranslation();
+  const { t } = useTranslation('number');
   const [result, setResult] = useState<RandomPortResult | null>(null);
   const [error, setError] = useState<string | null>(null);
   const [formattedResult, setFormattedResult] = useState<string>('');
@@ -59,40 +57,43 @@ export default function RandomPortGenerator({
       setFormattedResult(formatted);
     } catch (err) {
       console.error('Random port generation failed:', err);
-      setError(t('number:randomPortGenerator.error.generationFailed'));
+      setError(t('randomPortGenerator.error.generationFailed'));
     }
   };
-
+  const portOptions = [
+    {
+      value: 'well-known',
+      label: t('randomPortGenerator.options.range.wellKnown')
+    },
+    {
+      value: 'registered',
+      label: t('randomPortGenerator.options.range.registered')
+    },
+    {
+      value: 'dynamic',
+      label: t('randomPortGenerator.options.range.dynamic')
+    },
+    {
+      value: 'custom',
+      label: t('randomPortGenerator.options.range.custom')
+    }
+  ] as const;
   const getGroups: GetGroupsType<InitialValuesType> | null = ({
     values,
     updateField
   }) => [
     {
-      title: t('number:randomPortGenerator.options.range.title'),
+      title: t('randomPortGenerator.options.range.title'),
       component: (
         <Box>
-          <RadioWithTextField
+          {portOptions.map((option) => (
-            value={values.portRange}
+            <SimpleRadio
-            onTextChange={(value: any) => updateField('portRange', value)}
+              key={option.value}
-            options={[
+              title={option.label}
-              {
+              checked={values.portRange === option.value}
-                value: 'well-known',
+              onClick={() => updateField('portRange', option.value)}
-                label: t('number:randomPortGenerator.options.range.wellKnown')
+            />
-              },
+          ))}
-              {
-                value: 'registered',
-                label: t('number:randomPortGenerator.options.range.registered')
-              },
-              {
-                value: 'dynamic',
-                label: t('number:randomPortGenerator.options.range.dynamic')
-              },
-              {
-                value: 'custom',
-                label: t('number:randomPortGenerator.options.range.custom')
-              }
-            ]}
-          />
 
           {values.portRange === 'custom' && (
             <Box sx={{ mt: 2 }}>
@@ -102,7 +103,7 @@ export default function RandomPortGenerator({
                   updateField('minPort', parseInt(value) || 1024)
                 }
                 description={t(
-                  'number:randomPortGenerator.options.range.minPortDescription'
+                  'randomPortGenerator.options.range.minPortDescription'
                 )}
                 inputProps={{
                   type: 'number',
@@ -117,7 +118,7 @@ export default function RandomPortGenerator({
                   updateField('maxPort', parseInt(value) || 49151)
                 }
                 description={t(
-                  'number:randomPortGenerator.options.range.maxPortDescription'
+                  'randomPortGenerator.options.range.maxPortDescription'
                 )}
                 inputProps={{
                   type: 'number',
@@ -140,14 +141,14 @@ export default function RandomPortGenerator({
       )
     },
     {
-      title: t('number:randomPortGenerator.options.generation.title'),
+      title: t('randomPortGenerator.options.generation.title'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.count.toString()}
             onOwnChange={(value) => updateField('count', parseInt(value) || 5)}
             description={t(
-              'number:randomPortGenerator.options.generation.countDescription'
+              'randomPortGenerator.options.generation.countDescription'
             )}
             inputProps={{
               type: 'number',
@@ -159,37 +160,37 @@ export default function RandomPortGenerator({
 
           <CheckboxWithDesc
             title={t(
-              'number:randomPortGenerator.options.generation.allowDuplicates.title'
+              'randomPortGenerator.options.generation.allowDuplicates.title'
             )}
             checked={values.allowDuplicates}
             onChange={(value) => updateField('allowDuplicates', value)}
             description={t(
-              'number:randomPortGenerator.options.generation.allowDuplicates.description'
+              'randomPortGenerator.options.generation.allowDuplicates.description'
             )}
           />
 
           <CheckboxWithDesc
             title={t(
-              'number:randomPortGenerator.options.generation.sortResults.title'
+              'randomPortGenerator.options.generation.sortResults.title'
             )}
             checked={values.sortResults}
             onChange={(value) => updateField('sortResults', value)}
             description={t(
-              'number:randomPortGenerator.options.generation.sortResults.description'
+              'randomPortGenerator.options.generation.sortResults.description'
             )}
           />
         </Box>
       )
     },
     {
-      title: t('number:randomPortGenerator.options.output.title'),
+      title: t('randomPortGenerator.options.output.title'),
       component: (
         <Box>
           <TextFieldWithDesc
             value={values.separator}
             onOwnChange={(value) => updateField('separator', value)}
             description={t(
-              'number:randomPortGenerator.options.output.separatorDescription'
+              'randomPortGenerator.options.output.separatorDescription'
             )}
             inputProps={{
               'data-testid': 'separator-input'
@@ -215,80 +216,17 @@ export default function RandomPortGenerator({
           )}
 
           {result && (
-            <Box>
+            <ToolTextResult
-              <ToolTextResult
+              title={t('randomPortGenerator.result.title')}
-                title={t('number:randomPortGenerator.result.title')}
+              value={formattedResult}
-                value={formattedResult}
+            />
-              />
-
-              <Box sx={{ mt: 2, display: 'flex', gap: 2, flexWrap: 'wrap' }}>
-                <Chip
-                  label={`${t('number:randomPortGenerator.result.range')}: ${
-                    result.range.min
-                  } - ${result.range.max}`}
-                  variant="outlined"
-                  color="primary"
-                />
-                <Chip
-                  label={`${t('number:randomPortGenerator.result.count')}: ${
-                    result.count
-                  }`}
-                  variant="outlined"
-                  color="secondary"
-                />
-                {result.hasDuplicates && (
-                  <Chip
-                    label={t('number:randomPortGenerator.result.hasDuplicates')}
-                    variant="outlined"
-                    color="warning"
-                  />
-                )}
-                {result.isSorted && (
-                  <Chip
-                    label={t('number:randomPortGenerator.result.isSorted')}
-                    variant="outlined"
-                    color="success"
-                  />
-                )}
-              </Box>
-
-              {result.ports.length > 0 && (
-                <Box sx={{ mt: 2 }}>
-                  <strong>
-                    {t('number:randomPortGenerator.result.portDetails')}:
-                  </strong>
-                  <Box
-                    sx={{ mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }}
-                  >
-                    {result.ports.slice(0, 10).map((port, index) => (
-                      <Chip
-                        key={index}
-                        label={`${port}${
-                          isCommonPort(port) ? ` (${getPortService(port)})` : ''
-                        }`}
-                        variant="outlined"
-                        size="small"
-                        color={isCommonPort(port) ? 'warning' : 'default'}
-                      />
-                    ))}
-                    {result.ports.length > 10 && (
-                      <Chip
-                        label={`+${result.ports.length - 10} more`}
-                        variant="outlined"
-                        size="small"
-                      />
-                    )}
-                  </Box>
-                </Box>
-              )}
-            </Box>
           )}
         </Box>
       }
       toolInfo={{
-        title: t('number:randomPortGenerator.info.title'),
+        title: t('randomPortGenerator.info.title'),
         description:
-          longDescription || t('number:randomPortGenerator.info.description')
+          longDescription || t('randomPortGenerator.info.description')
       }}
     />
   );

src/pages/tools/number/random-port-generator/meta.ts

@@ -6,7 +6,8 @@ export const tool = defineTool('number', {
     name: 'number:randomPortGenerator.title',
     description: 'number:randomPortGenerator.description',
     shortDescription: 'number:randomPortGenerator.shortDescription',
-    longDescription: 'number:randomPortGenerator.longDescription'
+    longDescription: 'number:randomPortGenerator.longDescription',
+    userTypes: ['developers']
   },
   path: 'random-port-generator',
   icon: 'mdi:network',