From c53e479736db27d06ed6d09eb1719f3900d11718 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Mon, 11 Mar 2024 06:26:39 +0300
Subject: [PATCH 1/6] trim init

---
 README.md                                     |  1 +
 src/lib/components/RadioButton.svelte         | 16 ++++++++
 .../components/AddManipulation.svelte         |  8 ++++
 .../components/Manipulation.svelte            |  3 ++
 src/lib/manipulations/components/Trim.svelte  | 41 +++++++++++++++++++
 src/lib/manipulations/index.ts                | 18 +++++++-
 src/routes/docs/+page.svelte                  | 13 ++++--
 7 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/RadioButton.svelte
 create mode 100644 src/lib/manipulations/components/Trim.svelte

diff --git a/README.md b/README.md
index 06ce96a..a24112a 100644
--- a/README.md
+++ b/README.md
@@ -13,4 +13,5 @@ Available manipulations:
 - Compose
 - Slice
 - Split-compose
+- Trim
 - Split-join
diff --git a/src/lib/components/RadioButton.svelte b/src/lib/components/RadioButton.svelte
new file mode 100644
index 0000000..6f5caf6
--- /dev/null
+++ b/src/lib/components/RadioButton.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  interface Option {
+    value: string;
+    label: string;
+  }
+
+  export let options: Option[];
+  export let selected: string;
+</script>
+
+{#each options as option}
+  <label>
+    <input type="radio" bind:group={selected} value={option.value} />
+    {option.label}
+  </label>
+{/each}
diff --git a/src/lib/manipulations/components/AddManipulation.svelte b/src/lib/manipulations/components/AddManipulation.svelte
index 42e1b3e..0ca57a8 100644
--- a/src/lib/manipulations/components/AddManipulation.svelte
+++ b/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>
diff --git a/src/lib/manipulations/components/Manipulation.svelte b/src/lib/manipulations/components/Manipulation.svelte
index 2266791..a7f2859 100644
--- a/src/lib/manipulations/components/Manipulation.svelte
+++ b/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}
diff --git a/src/lib/manipulations/components/Trim.svelte b/src/lib/manipulations/components/Trim.svelte
new file mode 100644
index 0000000..cc315c0
--- /dev/null
+++ b/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: 'leading' | 'trailing' | 'all';
+  }
+
+  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={options} />
+</div>
+
+<style>
+	div {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+</style>
diff --git a/src/lib/manipulations/index.ts b/src/lib/manipulations/index.ts
index efc2bf8..acb96e4 100644
--- a/src/lib/manipulations/index.ts
+++ b/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,19 @@ 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();
+					}
+				}
+			}
 		}
 	} catch (exception) {
 		if (exception instanceof Error) {
diff --git a/src/routes/docs/+page.svelte b/src/routes/docs/+page.svelte
index 95a6a8d..b3f9702 100644
--- a/src/routes/docs/+page.svelte
+++ b/src/routes/docs/+page.svelte
@@ -64,6 +64,12 @@
 				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',
@@ -71,11 +77,12 @@
 			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: '!' }
 				]
 			}
 		}

From 88094bfadb2800702ece0ee92029ea6125964b2a Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 12 Mar 2024 21:48:16 +0300
Subject: [PATCH 2/6] fix ts error

---
 src/lib/manipulations/components/Trim.svelte | 2 +-
 src/lib/manipulations/index.ts               | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/lib/manipulations/components/Trim.svelte b/src/lib/manipulations/components/Trim.svelte
index cc315c0..a125d1d 100644
--- a/src/lib/manipulations/components/Trim.svelte
+++ b/src/lib/manipulations/components/Trim.svelte
@@ -4,7 +4,7 @@
 
   export interface TrimManipulation extends ManipulationBase {
     type: 'trim';
-    trimType: 'leading' | 'trailing' | 'all';
+    trimType: string;
   }
 
   const options = [
diff --git a/src/lib/manipulations/index.ts b/src/lib/manipulations/index.ts
index acb96e4..6afc546 100644
--- a/src/lib/manipulations/index.ts
+++ b/src/lib/manipulations/index.ts
@@ -146,6 +146,9 @@ function doManipulationInner(input: string, manipulation: TManipulation): string
 					case 'all': {
 						return input.trim();
 					}
+					default: {
+						return input;
+					}
 				}
 			}
 		}

From b5976d4db7d40ce828243eea9a79532b272fcae9 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 12 Mar 2024 21:50:12 +0300
Subject: [PATCH 3/6] format

---
 src/lib/components/RadioButton.svelte        | 20 ++++-----
 src/lib/manipulations/components/Trim.svelte | 46 ++++++++++----------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/RadioButton.svelte b/src/lib/components/RadioButton.svelte
index 6f5caf6..108170e 100644
--- a/src/lib/components/RadioButton.svelte
+++ b/src/lib/components/RadioButton.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-  interface Option {
-    value: string;
-    label: string;
-  }
+	interface Option {
+		value: string;
+		label: string;
+	}
 
-  export let options: Option[];
-  export let selected: string;
+	export let options: Option[];
+	export let selected: string;
 </script>
 
 {#each options as option}
-  <label>
-    <input type="radio" bind:group={selected} value={option.value} />
-    {option.label}
-  </label>
+	<label>
+		<input type="radio" bind:group={selected} value={option.value} />
+		{option.label}
+	</label>
 {/each}
diff --git a/src/lib/manipulations/components/Trim.svelte b/src/lib/manipulations/components/Trim.svelte
index a125d1d..e32de99 100644
--- a/src/lib/manipulations/components/Trim.svelte
+++ b/src/lib/manipulations/components/Trim.svelte
@@ -1,35 +1,35 @@
 <script lang="ts" context="module">
-  import type { ManipulationBase } from '..';
-  import RadioButton from '$lib/components/RadioButton.svelte';
+	import type { ManipulationBase } from '..';
+	import RadioButton from '$lib/components/RadioButton.svelte';
 
-  export interface TrimManipulation extends ManipulationBase {
-    type: 'trim';
-    trimType: string;
-  }
+	export interface TrimManipulation extends ManipulationBase {
+		type: 'trim';
+		trimType: string;
+	}
 
-  const options = [
-    {
-      value: 'leading',
-      label: 'Leading'
-    },
-    {
-      value: 'trailing',
-      label: 'Trailing'
-    },
-    {
-      value: 'all',
-      label: 'All'
-    }
-  ]
+	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' };
+	export let { trimType }: TrimManipulation = { trimType: 'all', type: 'trim' };
 </script>
 
 <div>
-  <span>Trim </span>
-  <RadioButton bind:selected={trimType} options={options} />
+	<span>Trim </span>
+	<RadioButton bind:selected={trimType} {options} />
 </div>
 
 <style>

From a7cd147677b35bb8be606baf608b7ca319d81fb4 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 12 Mar 2024 21:53:10 +0300
Subject: [PATCH 4/6] add test

---
 src/index.test.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/index.test.ts b/src/index.test.ts
index 32de14e..fb459f5 100644
--- a/src/index.test.ts
+++ b/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');
+});

From ce5886534bb98b1e3f8b514a6c70cfcd9b5027d7 Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 12 Mar 2024 22:01:01 +0300
Subject: [PATCH 5/6] fix styles

---
 src/lib/components/RadioButton.svelte         | 33 +++++++++++++++----
 .../components/Manipulation.svelte            |  2 +-
 static/app.css                                |  1 +
 3 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/RadioButton.svelte b/src/lib/components/RadioButton.svelte
index 108170e..b7f606e 100644
--- a/src/lib/components/RadioButton.svelte
+++ b/src/lib/components/RadioButton.svelte
@@ -8,9 +8,30 @@
 	export let selected: string;
 </script>
 
-{#each options as option}
-	<label>
-		<input type="radio" bind:group={selected} value={option.value} />
-		{option.label}
-	</label>
-{/each}
+<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>
diff --git a/src/lib/manipulations/components/Manipulation.svelte b/src/lib/manipulations/components/Manipulation.svelte
index a7f2859..c30c655 100644
--- a/src/lib/manipulations/components/Manipulation.svelte
+++ b/src/lib/manipulations/components/Manipulation.svelte
@@ -87,7 +87,7 @@
 
 	.delete:hover {
 		outline: none;
-		border: 2px solid var(--border-color-100);
+		background-color: var(--bg-color-150);
 	}
 
 	.delete:active {
diff --git a/static/app.css b/static/app.css
index 6fcc0bf..4314560 100644
--- a/static/app.css
+++ b/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%);

From 6ace3d9000dbffcca71b9e34aa669a1584f781eb Mon Sep 17 00:00:00 2001
From: Denis Mishankov <mishankov@mail.com>
Date: Tue, 12 Mar 2024 22:01:25 +0300
Subject: [PATCH 6/6] format

---
 src/lib/components/RadioButton.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/RadioButton.svelte b/src/lib/components/RadioButton.svelte
index b7f606e..a395f95 100644
--- a/src/lib/components/RadioButton.svelte
+++ b/src/lib/components/RadioButton.svelte
@@ -17,7 +17,6 @@
 	{/each}
 </div>
 
-
 <style>
 	div {
 		display: flex;