feat: shuffle ui

.idea/workspace.xml

@@ -4,37 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: format number">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: rotate ui">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/shuffle/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/shuffle/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -272,15 +245,7 @@
       <workItem from="1720661825389" duration="4305000" />
       <workItem from="1720729165596" duration="3258000" />
       <workItem from="1720911748039" duration="331000" />
-      <workItem from="1720912096050" duration="810000" />
+      <workItem from="1720912096050" duration="1586000" />
-    </task>
-    <task id="LOCAL-00048" summary="chore: ResultFooter">
-      <option name="closed" value="true" />
-      <created>1719274243788</created>
-      <option name="number" value="00048" />
-      <option name="presentableId" value="LOCAL-00048" />
-      <option name="project" value="LOCAL" />
-      <updated>1719274243788</updated>
     </task>
     <task id="LOCAL-00049" summary="feat: change color in png finished">
       <option name="closed" value="true" />
@@ -666,7 +631,15 @@
       <option name="project" value="LOCAL" />
       <updated>1720730102817</updated>
     </task>
-    <option name="localTasksCounter" value="97" />
+    <task id="LOCAL-00097" summary="feat: rotate ui">
+      <option name="closed" value="true" />
+      <created>1720913013183</created>
+      <option name="number" value="00097" />
+      <option name="presentableId" value="LOCAL-00097" />
+      <option name="project" value="LOCAL" />
+      <updated>1720913013183</updated>
+    </task>
+    <option name="localTasksCounter" value="98" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -710,7 +683,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: loading screen" />
     <MESSAGE value="chore: shuffle tools search" />
     <MESSAGE value="refactor: toolOptions" />
     <MESSAGE value="feat: playwright" />
@@ -735,7 +707,8 @@
     <MESSAGE value="feat: reverse list ui" />
     <MESSAGE value="feat: self host" />
     <MESSAGE value="chore: format number" />
-    <option name="LAST_COMMIT_MESSAGE" value="chore: format number" />
+    <MESSAGE value="feat: rotate ui" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: rotate ui" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

src/pages/list/rotate/index.tsx

@@ -118,7 +118,7 @@ export default function Rotate() {
                 {rotationDirections.map(({ title, description, value }) => (
                   <SimpleRadio
                     key={`${value}`}
-                    onClick={() => updateField('right', Boolean(value))}
+                    onClick={() => updateField('right', value)}
                     title={title}
                     description={description}
                     checked={values.right === value}

src/pages/list/shuffle/index.tsx

@@ -1,11 +1,125 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
 import * as Yup from 'yup';
+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 { formatNumber } from '../../../utils/number';
+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.'
+  }
+];
 
-const initialValues = {};
-const validationSchema = Yup.object({
-  // splitSeparator: Yup.string().required('The separator is required')
-});
 export default function Shuffle() {
-  return <Box>Lorem ipsum</Box>;
+  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
+      )
+    );
+  };
+  const validationSchema = Yup.object({
+    // splitSeparator: Yup.string().required('The separator is required')
+  });
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput
+            title={'Input list'}
+            value={input}
+            onChange={setInput}
+          />
+        }
+        result={<ToolTextResult title={'Rotated 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}
+        validationSchema={validationSchema}
+      />
+    </Box>
+  );
 }