refactor: tools folder inside pages

src/pages/tools/list/shuffle/index.tsx

@@ -0,0 +1,119 @@
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions from '@components/options/ToolOptions';
+import { shuffleList, SplitOperatorType } from './service';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import SimpleRadio from '@components/options/SimpleRadio';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { isNumber } from '../../../../utils/string';
+
+const initialValues = {
+  splitOperatorType: 'symbol' as SplitOperatorType,
+  splitSeparator: ',',
+  joinSeparator: ',',
+  length: ''
+};
+const splitOperators: {
+  title: string;
+  description: string;
+  type: SplitOperatorType;
+}[] = [
+  {
+    title: 'Use a Symbol for Splitting',
+    description: 'Delimit input list items with a character.',
+    type: 'symbol'
+  },
+  {
+    title: 'Use a Regex for Splitting',
+    type: 'regex',
+    description: 'Delimit input list items with a regular expression.'
+  }
+];
+
+export default function Shuffle() {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { splitOperatorType, splitSeparator, joinSeparator, length } =
+      optionsValues;
+
+    setResult(
+      shuffleList(
+        splitOperatorType,
+        input,
+        splitSeparator,
+        joinSeparator,
+        isNumber(length) ? Number(length) : undefined
+      )
+    );
+  };
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput
+            title={'Input list'}
+            value={input}
+            onChange={setInput}
+          />
+        }
+        result={<ToolTextResult title={'Shuffled list'} value={result} />}
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, updateField }) => [
+          {
+            title: 'Input list separator',
+            component: (
+              <Box>
+                {splitOperators.map(({ title, description, type }) => (
+                  <SimpleRadio
+                    key={type}
+                    onClick={() => updateField('splitOperatorType', type)}
+                    title={title}
+                    description={description}
+                    checked={values.splitOperatorType === type}
+                  />
+                ))}
+                <TextFieldWithDesc
+                  description={'Set a delimiting symbol or regular expression.'}
+                  value={values.splitSeparator}
+                  onOwnChange={(val) => updateField('splitSeparator', val)}
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Shuffled List Length',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  description={'Output this many random items'}
+                  value={values.length}
+                  onOwnChange={(val) => updateField('length', val)}
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Shuffled List Separator',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  value={values.joinSeparator}
+                  onOwnChange={(value) => updateField('joinSeparator', value)}
+                  description={'Use this separator in the randomized list.'}
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+      />
+    </Box>
+  );
+}

src/pages/tools/list/shuffle/meta.ts

@@ -0,0 +1,13 @@
+import { defineTool } from '@tools/defineTool';
+import { lazy } from 'react';
+// import image from '@assets/text.png';
+
+export const tool = defineTool('list', {
+  name: 'Shuffle',
+  path: 'shuffle',
+  // image,
+  description: '',
+  shortDescription: '',
+  keywords: ['shuffle'],
+  component: lazy(() => import('./index'))
+});

src/pages/tools/list/shuffle/service.ts

@@ -0,0 +1,38 @@
+export type SplitOperatorType = 'symbol' | 'regex';
+
+// function that randomize the array
+function shuffleArray(array: string[]): string[] {
+  const shuffledArray = array.slice(); // Create a copy of the array
+  for (let i = shuffledArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+  }
+  return shuffledArray;
+}
+
+export function shuffleList(
+  splitOperatorType: SplitOperatorType,
+  input: string,
+  splitSeparator: string,
+  joinSeparator: string,
+  length?: number //  "?" is to handle the case the user let the input blank
+): string {
+  let array: string[];
+  let shuffledArray: string[];
+  switch (splitOperatorType) {
+    case 'symbol':
+      array = input.split(splitSeparator);
+      break;
+    case 'regex':
+      array = input.split(new RegExp(splitSeparator));
+      break;
+  }
+  shuffledArray = shuffleArray(array);
+  if (length !== undefined) {
+    if (length <= 0) {
+      throw new Error('Length value must be a positive number.');
+    }
+    return shuffledArray.slice(0, length).join(joinSeparator);
+  }
+  return shuffledArray.join(joinSeparator);
+}

src/pages/tools/list/shuffle/shuffle.service.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from 'vitest';
+import { shuffleList, SplitOperatorType } from './service';
+
+describe('shuffle function', () => {
+  it('should be a 4 length list if no length value defined ', () => {
+    const input: string = 'apple, pineaple, lemon, orange';
+    const splitOperatorType: SplitOperatorType = 'symbol';
+    const splitSeparator = ', ';
+    const joinSeparator = ' ';
+
+    const result = shuffleList(
+      splitOperatorType,
+      input,
+      splitSeparator,
+      joinSeparator
+    );
+    expect(result.split(joinSeparator).length).toBe(4);
+  });
+
+  it('should be a 2 length list if length value is set to 2', () => {
+    const input: string = 'apple, pineaple, lemon, orange';
+    const splitOperatorType: SplitOperatorType = 'symbol';
+    const splitSeparator = ', ';
+    const joinSeparator = ' ';
+    const length = 2;
+
+    const result = shuffleList(
+      splitOperatorType,
+      input,
+      splitSeparator,
+      joinSeparator,
+      length
+    );
+    console.log(result);
+    expect(result.split(joinSeparator).length).toBe(2);
+  });
+
+  it('should be a 4 length list if length value is set to 99', () => {
+    const input: string = 'apple, pineaple, lemon, orange';
+    const splitOperatorType: SplitOperatorType = 'symbol';
+    const splitSeparator = ', ';
+    const joinSeparator = ' ';
+    const length = 99;
+
+    const result = shuffleList(
+      splitOperatorType,
+      input,
+      splitSeparator,
+      joinSeparator,
+      length
+    );
+    console.log(result);
+    expect(result.split(joinSeparator).length).toBe(4);
+  });
+
+  it('should include a random element  if length value is undefined', () => {
+    const input: string = 'apple, pineaple, lemon, orange';
+    const splitOperatorType: SplitOperatorType = 'symbol';
+    const splitSeparator = ', ';
+    const joinSeparator = ' ';
+
+    const result = shuffleList(
+      splitOperatorType,
+      input,
+      splitSeparator,
+      joinSeparator,
+      length
+    );
+    console.log(result);
+    expect(result.split(joinSeparator)).toContain('apple');
+  });
+
+  it('should return empty string if input is empty', () => {
+    const input: string = '';
+    const splitOperatorType: SplitOperatorType = 'symbol';
+    const splitSeparator = ', ';
+    const joinSeparator = ' ';
+
+    const result = shuffleList(
+      splitOperatorType,
+      input,
+      splitSeparator,
+      joinSeparator,
+      length
+    );
+    console.log(result);
+    expect(result).toBe('');
+  });
+});