Some code cleanup, add jest coverage and begin using it for utility functions

resources/scripts/components/server/console/ServerDetailsBlock.tsx

@@ -8,7 +8,7 @@ import {
     faMicrochip,
     faWifi,
 } from '@fortawesome/free-solid-svg-icons';
-import { bytesToHuman, formatIp, megabytesToHuman } from '@/helpers';
+import { bytesToString, ip, mbToBytes } from '@/lib/formatters';
 import { ServerContext } from '@/state/server';
 import { SocketEvent, SocketRequest } from '@/components/server/events';
 import UptimeDuration from '@/components/server/UptimeDuration';
@@ -41,7 +41,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
     const allocation = ServerContext.useStoreState(state => {
         const match = state.server.data!.allocations.find(allocation => allocation.isDefault);
 
-        return !match ? 'n/a' : `${match.alias || formatIp(match.ip)}:${match.port}`;
+        return !match ? 'n/a' : `${match.alias || ip(match.ip)}:${match.port}`;
     });
 
     useEffect(() => {
@@ -106,14 +106,14 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 title={'Memory'}
                 color={getBackgroundColor(stats.memory / 1024, limits.memory * 1024)}
                 description={limits.memory
-                    ? `This server is allowed to use up to ${megabytesToHuman(limits.memory)} of memory.`
+                    ? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.memory))} of memory.`
                     : 'No memory limit has been configured for this server.'
                 }
             >
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.memory)
+                    bytesToString(stats.memory)
                 }
             </StatBlock>
             <StatBlock
@@ -121,11 +121,11 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 title={'Disk'}
                 color={getBackgroundColor(stats.disk / 1024, limits.disk * 1024)}
                 description={limits.disk
-                    ? `This server is allowed to use up to ${megabytesToHuman(limits.disk)} of disk space.`
+                    ? `This server is allowed to use up to ${bytesToString(mbToBytes(limits.disk))} of disk space.`
                     : 'No disk space limit has been configured for this server.'
                 }
             >
-                {bytesToHuman(stats.disk)}
+                {bytesToString(stats.disk)}
             </StatBlock>
             <StatBlock
                 icon={faCloudDownloadAlt}
@@ -135,7 +135,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.tx)
+                    bytesToString(stats.tx)
                 }
             </StatBlock>
             <StatBlock
@@ -146,7 +146,7 @@ const ServerDetailsBlock = ({ className }: { className?: string }) => {
                 {status === 'offline' ?
                     <span className={'text-gray-400'}>Offline</span>
                     :
-                    bytesToHuman(stats.rx)
+                    bytesToString(stats.rx)
                 }
             </StatBlock>
         </div>

resources/scripts/components/server/console/StatGraphs.tsx

@@ -4,7 +4,8 @@ import { SocketEvent } from '@/components/server/events';
 import useWebsocketEvent from '@/plugins/useWebsocketEvent';
 import { Line } from 'react-chartjs-2';
 import { useChart, useChartTickLabel } from '@/components/server/console/chart';
-import { bytesToHuman, toRGBA } from '@/helpers';
+import { hexToRgba } from '@/lib/helpers';
+import { bytesToString } from '@/lib/formatters';
 import { CloudDownloadIcon, CloudUploadIcon } from '@heroicons/react/solid';
 import { theme } from 'twin.macro';
 import ChartBlock from '@/components/server/console/ChartBlock';
@@ -24,7 +25,7 @@ export default () => {
                 y: {
                     ticks: {
                         callback (value) {
-                            return bytesToHuman(typeof value === 'string' ? parseInt(value, 10) : value);
+                            return bytesToString(typeof value === 'string' ? parseInt(value, 10) : value);
                         },
                     },
                 },
@@ -35,7 +36,7 @@ export default () => {
                 ...opts,
                 label: !index ? 'Network In' : 'Network Out',
                 borderColor: !index ? theme('colors.cyan.400') : theme('colors.yellow.400'),
-                backgroundColor: toRGBA(!index ? theme('colors.cyan.700') : theme('colors.yellow.700'), 0.5),
+                backgroundColor: hexToRgba(!index ? theme('colors.cyan.700') : theme('colors.yellow.700'), 0.5),
             };
         },
     });

resources/scripts/components/server/console/chart.ts

@@ -12,7 +12,7 @@ import { DeepPartial } from 'ts-essentials';
 import { useState } from 'react';
 import { deepmerge, deepmergeCustom } from 'deepmerge-ts';
 import { theme } from 'twin.macro';
-import { toRGBA } from '@/helpers';
+import { hexToRgba } from '@/lib/helpers';
 
 ChartJS.register(LineElement, PointElement, Filler, LinearScale);
 
@@ -86,7 +86,7 @@ function getEmptyData (label: string, sets = 1, callback?: ChartDatasetCallback
             label,
             data: Array(20).fill(0),
             borderColor: theme('colors.cyan.400'),
-            backgroundColor: toRGBA(theme('colors.cyan.700'), 0.5),
+            backgroundColor: hexToRgba(theme('colors.cyan.700'), 0.5),
         }, index)),
     };
 }