From 8135f9fb16e58cf80cd8b38ecbab0a6b6c7279e9 Mon Sep 17 00:00:00 2001
From: Arthur Geel <geelaj01@gmail.com>
Date: Fri, 15 Nov 2024 17:56:47 +0100
Subject: [PATCH] Always enable syntax highlighting, minor refactor

- Extract styles into module.css
- Remove obsolete types
---
 .../GeneredTaskfile/GeneratedTaskfile.tsx     |  8 ++---
 .../Highlighter/Highlighter.tsx               |  5 +--
 .../Highlighter/highlighter.module.css        | 35 +++++++++++++++++++
 .../Highlighter/lineRenderers.tsx             | 31 ++++++++--------
 .../GeneredTaskfile/Highlighter/styles.ts     | 18 ----------
 .../GeneredTaskfile/Highlighter/types.ts      |  7 ----
 6 files changed, 56 insertions(+), 48 deletions(-)
 create mode 100644 src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
 delete mode 100644 src/components/Generator/GeneredTaskfile/Highlighter/styles.ts

diff --git a/src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx b/src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx
index 66b6631..202ccb1 100644
--- a/src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx
+++ b/src/components/Generator/GeneredTaskfile/GeneratedTaskfile.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { ReactElement, useState } from 'react';
+import { ReactElement } from 'react';
 import { taskfile } from '@/components/Generator/GeneredTaskfile/taskfile';
 import { useFormContext } from 'react-hook-form';
 import { GeneratorSettings } from '@/components/Generator/Generator';
@@ -8,8 +8,6 @@ import CopyToClipboard from '@/components/Generator/GeneredTaskfile/Copy';
 import { highlighter } from './Highlighter';
 
 const GeneratedTaskfile = (): ReactElement => {
-	const [showHighlighting, setShowHighlighting] = useState(true);
-
 	const form = useFormContext<GeneratorSettings>();
 
 	const settings = form.watch();
@@ -19,9 +17,7 @@ const GeneratedTaskfile = (): ReactElement => {
 	return (
 		<>
 			<CopyToClipboard onCopy={() => navigator.clipboard.writeText(resultTaskfile)} />
-			<pre onClick={() => setShowHighlighting(!showHighlighting)}>
-				{showHighlighting ? highlighter(resultTaskfile) : resultTaskfile}
-			</pre>
+			<pre>{highlighter(resultTaskfile)}</pre>
 		</>
 	);
 };
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx b/src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx
index 7bfed06..3211a5b 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/Highlighter.tsx
@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 
-import { styles } from './styles';
+import styles from './highlighter.module.css';
+
 import { lineRenderers } from './lineRenderers';
 
 export const highlighter = (code: string): ReactElement[] => {
@@ -15,7 +16,7 @@ export const highlighter = (code: string): ReactElement[] => {
 		}
 
 		return (
-			<div key={index} style={styles.colors.white}>
+			<div key={index} className={styles['text-white']}>
 				{line}
 			</div>
 		);
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
new file mode 100644
index 0000000..1dcda92
--- /dev/null
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/highlighter.module.css
@@ -0,0 +1,35 @@
+.line {
+	display: flex;
+}
+
+.text-white {
+	color: #fff;
+}
+
+.text-gray {
+	color: #888589;
+}
+
+.text-yellow {
+	color: #fde047;
+}
+
+.text-yellow-light {
+	color: #fef08a;
+}
+
+.text-pink {
+	color: #ec4899;
+}
+
+.text-purple {
+	color: #a855f7;
+}
+
+.text-blue {
+	color: #60a5fa;
+}
+
+.text-blue-light {
+	color: #93c5fd;
+}
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
index ee4b8ea..7c07dca 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/lineRenderers.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { LineRenderer, RendererType } from './types';
-import { styles } from './styles';
+
+import styles from './highlighter.module.css';
 
 export const lineRenderers: LineRenderer[] = [
 	{
@@ -15,10 +16,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const [, name, rest] = line.match(/^function\s+([a-zA-Z_:]+)(.*)/) || [];
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.purple}>function </span>
-					<span style={styles.colors.yellow}>{name}</span>
-					<span style={styles.colors.white}>{rest}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-purple']}>function </span>
+					<span className={styles['text-yellow']}>{name}</span>
+					<span className={styles['text-white']}>{rest}</span>
 				</div>
 			);
 		},
@@ -27,7 +28,7 @@ export const lineRenderers: LineRenderer[] = [
 		type: RendererType.Comments,
 		test: (line) => line.trim().startsWith('#'),
 		render: (line, i) => (
-			<div key={i} style={styles.colors.gray}>
+			<div key={i} className={styles['text-gray']}>
 				{line}
 			</div>
 		),
@@ -38,10 +39,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const [varName, ...rest] = line.split('=');
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.blue}>{varName}</span>
-					<span style={styles.colors.white}>=</span>
-					<span style={styles.colors.lightYellow}>{rest.join('=')}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-blue']}>{varName}</span>
+					<span className={styles['text-white']}>=</span>
+					<span className={styles['text-yellow-light']}>{rest.join('=')}</span>
 				</div>
 			);
 		},
@@ -50,7 +51,7 @@ export const lineRenderers: LineRenderer[] = [
 		type: RendererType.Conditionals,
 		test: (line) => /^\s*if\s+|^\s*then\s+|^\s*else\s+|^\s*fi\s*/.test(line),
 		render: (line, i) => (
-			<div key={i} style={styles.colors.pink}>
+			<div key={i} className={styles['text-pink']}>
 				{line}
 			</div>
 		),
@@ -61,10 +62,10 @@ export const lineRenderers: LineRenderer[] = [
 		render: (line, i) => {
 			const parts = line.split('echo');
 			return (
-				<div key={i} style={styles.line}>
-					<span style={styles.colors.white}>{parts[0]}</span>
-					<span style={styles.colors.lightBlue}>echo</span>
-					<span style={styles.colors.lightYellow}>{parts[1]}</span>
+				<div key={i} className={styles.line}>
+					<span className={styles['text-white']}>{parts[0]}</span>
+					<span className={styles['text-blue-light']}>echo</span>
+					<span className={styles['text-yellow-light']}>{parts[1]}</span>
 				</div>
 			);
 		},
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/styles.ts b/src/components/Generator/GeneredTaskfile/Highlighter/styles.ts
deleted file mode 100644
index 8e9991e..0000000
--- a/src/components/Generator/GeneredTaskfile/Highlighter/styles.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { StylesConfig } from './types';
-
-export const styles: StylesConfig = {
-	line: {
-		display: 'flex',
-	},
-	colors: {
-		white: { color: '#fff' },
-		purple: { color: '#a855f7' },
-		yellow: { color: '#fde047' },
-		green: { color: '#22c55e' },
-		blue: { color: '#60a5fa' },
-		pink: { color: '#ec4899' },
-		lightYellow: { color: '#fef08a' },
-		lightBlue: { color: '#93c5fd' },
-		gray: { color: '#888589' },
-	},
-};
diff --git a/src/components/Generator/GeneredTaskfile/Highlighter/types.ts b/src/components/Generator/GeneredTaskfile/Highlighter/types.ts
index 0f7cf33..41fa6a8 100644
--- a/src/components/Generator/GeneredTaskfile/Highlighter/types.ts
+++ b/src/components/Generator/GeneredTaskfile/Highlighter/types.ts
@@ -1,12 +1,5 @@
 import { ReactElement } from 'react';
 
-type ColorName = 'white' | 'purple' | 'yellow' | 'green' | 'blue' | 'pink' | 'lightYellow' | 'lightBlue' | 'gray';
-
-export type StylesConfig = {
-	line: { display: string };
-	colors: Record<ColorName, { color: string }>;
-};
-
 export enum RendererType {
 	EmptyLines,
 	FunctionDefinitions,