feat: missing tools

src/pages/tools/string/index.ts

@@ -26,5 +26,8 @@ export const stringTools = [
   stringUppercase,
   stringExtractSubstring,
   stringCreatePalindrome,
-  stringPalindrome
+  stringPalindrome,
+  stringQuote,
+  stringRotate,
+  stringRot13
 ];

src/pages/tools/string/quote/index.tsx

@@ -1,11 +1,149 @@
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { stringQuoter } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 
-const initialValues = {};
-const validationSchema = Yup.object({
-  // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Quote() {
-  return <Box>Lorem ipsum</Box>;
-}
+interface InitialValuesType {
+  leftQuote: string;
+  rightQuote: string;
+  doubleQuotation: boolean;
+  emptyQuoting: boolean;
+  multiLine: boolean;
+}
+
+const initialValues: InitialValuesType = {
+  leftQuote: '"',
+  rightQuote: '"',
+  doubleQuotation: false,
+  emptyQuoting: true,
+  multiLine: true
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Quote text with double quotes',
+    description: 'This example shows how to quote text with double quotes.',
+    sampleText: 'Hello World',
+    sampleResult: '"Hello World"',
+    sampleOptions: {
+      leftQuote: '"',
+      rightQuote: '"',
+      doubleQuotation: false,
+      emptyQuoting: true,
+      multiLine: false
+    }
+  },
+  {
+    title: 'Quote multi-line text with single quotes',
+    description:
+      'This example shows how to quote multi-line text with single quotes.',
+    sampleText: 'Hello\nWorld',
+    sampleResult: "'Hello'\n'World'",
+    sampleOptions: {
+      leftQuote: "'",
+      rightQuote: "'",
+      doubleQuotation: false,
+      emptyQuoting: true,
+      multiLine: true
+    }
+  },
+  {
+    title: 'Quote with custom quotes',
+    description: 'This example shows how to quote text with custom quotes.',
+    sampleText: 'Hello World',
+    sampleResult: '<<Hello World>>',
+    sampleOptions: {
+      leftQuote: '<<',
+      rightQuote: '>>',
+      doubleQuotation: false,
+      emptyQuoting: true,
+      multiLine: false
+    }
+  }
+];
+
+export default function Quote({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (optionsValues: InitialValuesType, input: string) => {
+    if (input) {
+      setResult(
+        stringQuoter(
+          input,
+          optionsValues.leftQuote,
+          optionsValues.rightQuote,
+          optionsValues.doubleQuotation,
+          optionsValues.emptyQuoting,
+          optionsValues.multiLine
+        )
+      );
+    }
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Quote Options',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            value={values.leftQuote}
+            onOwnChange={(val) => updateField('leftQuote', val)}
+            description={'Left quote character(s)'}
+          />
+          <TextFieldWithDesc
+            value={values.rightQuote}
+            onOwnChange={(val) => updateField('rightQuote', val)}
+            description={'Right quote character(s)'}
+          />
+          <CheckboxWithDesc
+            checked={values.doubleQuotation}
+            onChange={(checked) => updateField('doubleQuotation', checked)}
+            title={'Allow double quotation'}
+          />
+          <CheckboxWithDesc
+            checked={values.emptyQuoting}
+            onChange={(checked) => updateField('emptyQuoting', checked)}
+            title={'Quote empty lines'}
+          />
+          <CheckboxWithDesc
+            checked={values.multiLine}
+            onChange={(checked) => updateField('multiLine', checked)}
+            title={'Process as multi-line text'}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input Text" value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title="Quoted Text" value={result} />}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      toolInfo={{
+        title: 'Text Quoter',
+        description:
+          "This tool allows you to add quotes around text. You can choose different quote characters, handle multi-line text, and control how empty lines are processed. It's useful for preparing text for programming, formatting data, or creating stylized text."
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}

src/pages/tools/string/rot13/index.tsx

@@ -1,11 +1,60 @@
-import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState } from 'react';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { rot13 } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
 
-const initialValues = {};
-const validationSchema = Yup.object({
-  // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Rot13() {
-  return <Box>Lorem ipsum</Box>;
-}
+type InitialValuesType = Record<string, never>;
+
+const initialValues: InitialValuesType = {};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Encode a message with ROT13',
+    description:
+      'This example shows how to encode a simple message using ROT13 cipher.',
+    sampleText: 'Hello, World!',
+    sampleResult: 'Uryyb, Jbeyq!',
+    sampleOptions: {}
+  },
+  {
+    title: 'Decode a ROT13 message',
+    description:
+      'This example shows how to decode a message that was encoded with ROT13.',
+    sampleText: 'Uryyb, Jbeyq!',
+    sampleResult: 'Hello, World!',
+    sampleOptions: {}
+  }
+];
+
+export default function Rot13({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (_: InitialValuesType, input: string) => {
+    if (input) setResult(rot13(input));
+  };
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input Text" value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title="ROT13 Result" value={result} />}
+      initialValues={initialValues}
+      getGroups={null}
+      toolInfo={{
+        title: 'What Is ROT13?',
+        description:
+          'ROT13 (rotate by 13 places) is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. ROT13 is a special case of the Caesar cipher which was developed in ancient Rome. Because there are 26 letters in the English alphabet, ROT13 is its own inverse; that is, to undo ROT13, the same algorithm is applied, so the same action can be used for encoding and decoding.'
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}

src/pages/tools/string/rotate/index.tsx

@@ -1,11 +1,131 @@
+import React, { useState } from 'react';
 import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import ToolContent from '@components/ToolContent';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { rotateString } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import SimpleRadio from '@components/options/SimpleRadio';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 
-const initialValues = {};
-const validationSchema = Yup.object({
-  // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Rotate() {
-  return <Box>Lorem ipsum</Box>;
-}
+interface InitialValuesType {
+  step: string;
+  direction: 'left' | 'right';
+  multiLine: boolean;
+}
+
+const initialValues: InitialValuesType = {
+  step: '1',
+  direction: 'right',
+  multiLine: true
+};
+
+const exampleCards: CardExampleType<InitialValuesType>[] = [
+  {
+    title: 'Rotate text to the right',
+    description:
+      'This example shows how to rotate text to the right by 2 positions.',
+    sampleText: 'abcdef',
+    sampleResult: 'efabcd',
+    sampleOptions: {
+      step: '2',
+      direction: 'right',
+      multiLine: false
+    }
+  },
+  {
+    title: 'Rotate text to the left',
+    description:
+      'This example shows how to rotate text to the left by 2 positions.',
+    sampleText: 'abcdef',
+    sampleResult: 'cdefab',
+    sampleOptions: {
+      step: '2',
+      direction: 'left',
+      multiLine: false
+    }
+  },
+  {
+    title: 'Rotate multi-line text',
+    description:
+      'This example shows how to rotate each line of a multi-line text.',
+    sampleText: 'abcdef\nghijkl',
+    sampleResult: 'fabcde\nlghijk',
+    sampleOptions: {
+      step: '1',
+      direction: 'right',
+      multiLine: true
+    }
+  }
+];
+
+export default function Rotate({ title }: ToolComponentProps) {
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+
+  const compute = (optionsValues: InitialValuesType, input: string) => {
+    if (input) {
+      const step = parseInt(optionsValues.step, 10) || 1;
+      const isRight = optionsValues.direction === 'right';
+      setResult(rotateString(input, step, isRight, optionsValues.multiLine));
+    }
+  };
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Rotation Options',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            value={values.step}
+            onOwnChange={(val) => updateField('step', val)}
+            description={'Number of positions to rotate'}
+            type="number"
+          />
+          <SimpleRadio
+            onClick={() => updateField('direction', 'right')}
+            checked={values.direction === 'right'}
+            title={'Rotate Right'}
+          />
+          <SimpleRadio
+            onClick={() => updateField('direction', 'left')}
+            checked={values.direction === 'left'}
+            title={'Rotate Left'}
+          />
+          <CheckboxWithDesc
+            checked={values.multiLine}
+            onChange={(checked) => updateField('multiLine', checked)}
+            title={'Process as multi-line text (rotate each line separately)'}
+          />
+        </Box>
+      )
+    }
+  ];
+
+  return (
+    <ToolContent
+      title={title}
+      inputComponent={
+        <ToolTextInput title="Input Text" value={input} onChange={setInput} />
+      }
+      resultComponent={<ToolTextResult title="Rotated Text" value={result} />}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      toolInfo={{
+        title: 'String Rotation',
+        description:
+          'This tool allows you to rotate characters in a string by a specified number of positions. You can rotate to the left or right, and process multi-line text by rotating each line separately. String rotation is useful for simple text transformations, creating patterns, or implementing basic encryption techniques.'
+      }}
+      exampleCards={exampleCards}
+      input={input}
+      setInput={setInput}
+      compute={compute}
+    />
+  );
+}