Trim manipulation

README.md

@@ -13,4 +13,5 @@ Available manipulations:
 - Compose
 - Slice
 - Split-compose
+- Trim
 - Split-join

src/index.test.ts

@@ -5,3 +5,9 @@ it('Test replace manipulation', () => {
 	expect(doManipulation('\\3', { type: 'replace', from: '\\\\3', to: 'result' })).eq('result');
 	expect(doManipulation('\\', { type: 'replace', from: '\\\\', to: 'result' })).eq('result');
 });
+
+it('Test trim manipulation', () => {
+	expect(doManipulation('   input    ', { type: 'trim', trimType: 'leading' })).eq('input    ');
+	expect(doManipulation('   input    ', { type: 'trim', trimType: 'trailing' })).eq('   input');
+	expect(doManipulation('   input    ', { type: 'trim', trimType: 'all' })).eq('input');
+});

src/lib/components/RadioButton.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	interface Option {
+		value: string;
+		label: string;
+	}
+
+	export let options: Option[];
+	export let selected: string;
+</script>
+
+<div>
+	{#each options as option}
+		<label>
+			<input type="radio" bind:group={selected} value={option.value} />
+			{option.label}
+		</label>
+	{/each}
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	label {
+		display: flex;
+		gap: 5px;
+		align-items: center;
+	}
+
+	input {
+		margin: 0;
+	}
+</style>

src/lib/manipulations/components/AddManipulation.svelte

@@ -74,6 +74,13 @@
 					id: randomId()
 				});
 				break;
+			case 'trim':
+				manipulations.push({
+					type: 'trim',
+					trimType: 'all',
+					id: randomId()
+				});
+				break;
 		}
 
 		manipulations = manipulations;
@@ -90,5 +97,6 @@
 	<option value="compose">Compose</option>
 	<option value="slice">Slice</option>
 	<option value="splitCompose">Split-compose</option>
+	<option value="trim">Trim</option>
 	<option value="splitJoin">Split-join</option>
 </select>

src/lib/manipulations/components/Manipulation.svelte

@@ -10,6 +10,7 @@
 		Compose,
 		Slice,
 		SplitCompose,
+		Trim,
 		SplitJoin
 	} from '..';
 
@@ -46,6 +47,8 @@
 			bind:pattern={manipulation.pattern}
 			bind:placeholder={manipulation.placeholder}
 		/>
+	{:else if manipulation.type == 'trim'}
+		<Trim bind:trimType={manipulation.trimType} />
 	{:else if manipulation.type == 'splitJoin'}
 		<SplitJoin
 			bind:splitString={manipulation.splitString}
@@ -84,7 +87,7 @@
 
 	.delete:hover {
 		outline: none;
-		border: 2px solid var(--border-color-100);
+		background-color: var(--bg-color-150);
 	}
 
 	.delete:active {

src/lib/manipulations/components/Trim.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" context="module">
+	import type { ManipulationBase } from '..';
+	import RadioButton from '$lib/components/RadioButton.svelte';
+
+	export interface TrimManipulation extends ManipulationBase {
+		type: 'trim';
+		trimType: string;
+	}
+
+	const options = [
+		{
+			value: 'leading',
+			label: 'Leading'
+		},
+		{
+			value: 'trailing',
+			label: 'Trailing'
+		},
+		{
+			value: 'all',
+			label: 'All'
+		}
+	];
+</script>
+
+<script lang="ts">
+	export let { trimType }: TrimManipulation = { trimType: 'all', type: 'trim' };
+</script>
+
+<div>
+	<span>Trim </span>
+	<RadioButton bind:selected={trimType} {options} />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+</style>

src/lib/manipulations/index.ts

@@ -8,6 +8,7 @@ import SplitGetFromIndex, {
 	type SplitGetFromIndexManipulation
 } from './components/SplitGetFromIndex.svelte';
 import SplitJoin, { type SplitJoinManipulation } from './components/SplitJoin.svelte';
+import Trim, { type TrimManipulation } from './components/Trim.svelte';
 
 import AddManipulation from './components/AddManipulation.svelte';
 import Manipulation from './components/Manipulation.svelte';
@@ -23,6 +24,7 @@ export {
 	SplitCompose,
 	SplitGetFromIndex,
 	SplitJoin,
+	Trim,
 	Manipulation,
 	AddManipulation,
 	ManipulationsList
@@ -41,7 +43,8 @@ export type TManipulation =
 	| SliceManipulation
 	| SplitComposeManipulation
 	| SplitGetFromIndexManipulation
-	| SplitJoinManipulation;
+	| SplitJoinManipulation
+	| TrimManipulation;
 
 // Supported manupulations to use in splitJoin
 export type InnerSplitJoinManipulation = TManipulation;
@@ -132,6 +135,22 @@ function doManipulationInner(input: string, manipulation: TManipulation): string
 					})
 					.join(prepareInput(manipulation.joinString));
 			}
+			case 'trim': {
+				switch (manipulation.trimType) {
+					case 'leading': {
+						return input.trimStart();
+					}
+					case 'trailing': {
+						return input.trimEnd();
+					}
+					case 'all': {
+						return input.trim();
+					}
+					default: {
+						return input;
+					}
+				}
+			}
 		}
 	} catch (exception) {
 		if (exception instanceof Error) {

src/routes/docs/+page.svelte

@@ -64,18 +64,25 @@
 				pattern: 'Reordered {1}, {0}, {2}!'
 			}
 		},
+		{
+			name: 'Trim',
+			description: 'Trim all, leading or triling spaces from input',
+			source: '  Some good input  ',
+			manipulation: { id: 'trim', type: 'trim', trimType: 'all' }
+		},
 		{
 			name: 'Split-join',
 			description: 'Split input by delimeter, apply manipulations and join',
 			source: 'Zero, one, two, three',
 			manipulation: {
 				id: 'splitJoin',
 				type: 'splitJoin',
-				splitString: ', ',
+				splitString: ',',
 				joinString: '\\n',
 				innerManipulations: [
-					{ id: 'splitJoinprepend', type: 'prepend', prefix: 'Number: ' },
-					{ id: 'splitJoinappend', type: 'append', suffix: '!' }
+					{ id: 'splitJoinTrim', type: 'trim', trimType: 'leading' },
+					{ id: 'splitJoinPrepend', type: 'prepend', prefix: 'Number: ' },
+					{ id: 'splitJoinAppend', type: 'append', suffix: '!' }
 				]
 			}
 		}

static/app.css

@@ -1,5 +1,6 @@
 html {
 	--bg-color-100: hsl(157, 100%, 90%);
+	--bg-color-150: hsl(157, 100%, 95%);
 	--border-color-100: hsl(157, 100%, 10%);
 
 	--text-color: hsl(157, 100%, 10%);