abjad-web version 0.2.0 (#13)

## [0.2.0] 2024-01-16 ### Changed - style web page - remove convert button - do convert on changes text and select from dropdown
amerharb · Jan 16, 2024 · c535eca · c535eca
1 parent 771b1da
commit c535eca
Show file tree

Hide file tree

Showing 10 changed files with 306 additions and 92 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -11,6 +11,9 @@ module.exports = {
   plugins: [
     '@typescript-eslint',
   ],
+  extends: [
+    'plugin:@next/next/recommended',
+  ],
   ignorePatterns: '*.js',
   overrides: [
     {

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
 		"start": "yarn workspaces foreach --all -p run start"
 	},
 	"devDependencies": {
+		"@next/eslint-plugin-next": "^14.0.4",
 		"@types/node": "^20.11.2",
 		"@typescript-eslint/eslint-plugin": "^6.11.0",
 		"@typescript-eslint/parser": "^6.11.0",

diff --git a/packages/abjad-client/package.json b/packages/abjad-client/package.json
@@ -4,8 +4,7 @@
 	"version": "0.0.4",
 	"main": "dist/index.js",
 	"scripts": {
-		"prebuild": "rm -rf dist",
-		"build": "tsc",
+		"build": "rm -rf dist && tsc",
 		"start": "node dist/index.js",
 		"test": "echo \"Error: no test specified\" && exit 0",
 		"dev": "ts-node src/index.ts",

diff --git a/packages/abjad-convert/package.json b/packages/abjad-convert/package.json
@@ -29,11 +29,10 @@
 	],
 	"license": "ISC",
 	"scripts": {
-		"prebuild": "rm -rf dist",
-		"build": "tsc",
+		"build": "rm -rf dist && tsc",
 		"start": "node dist/index.js",
-		"test": "jest",
-		"posttest": "npx make-coverage-badge --report-path coverage/coverage-summary.json --output-path badges/coverage.svg",
+		"test": "jest && yarn run make-coverage-badge",
+		"make-coverage-badge": "npx make-coverage-badge --report-path coverage/coverage-summary.json --output-path badges/coverage.svg",
 		"dev": "ts-node src/index.ts",
 		"lint": "npx eslint . --max-warnings 0",
 		"lint:fix": "npx eslint . --fix",

diff --git a/packages/abjad-web/CHANGELOG.md b/packages/abjad-web/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 <!-- https://keepachangelog.com/en/1.0.0/ -->
 
+## [0.2.0] 2024-01-16
+### Changed
+- style web page
+- remove convert button
+- do convert on changes text and select from dropdown
+
 ## [0.1.0] 2024-01-14
 ### Changed
 - use abjad-convert 0.2.1

diff --git a/packages/abjad-web/package.json b/packages/abjad-web/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "abjad-web",
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"private": true,
 	"scripts": {
 		"dev": "next dev",
@@ -17,9 +17,10 @@
 		"abjad-convert": "0.2.1",
 		"next": "13.5.6",
 		"react": "^18",
-		"react-dom": "^18"
+		"react-dom": "^18",
+		"react-select": "^5.8.0"
 	},
 	"devDependencies": {
-		"@types/react": "18.2.47"
+		"@types/react": "^18"
 	}
 }
diff --git a/packages/abjad-web/src/app/layout.tsx b/packages/abjad-web/src/app/layout.tsx
@@ -5,14 +5,10 @@ import React from 'react'
 const inter = Inter({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-	title: 'Abjad web app',
+	title: 'Abjad web',
 }
 
-export default function RootLayout({
-																		 children,
-																	 }: {
-	children: React.ReactNode;
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
 	return (
 		<html lang="en">
 			<body className={inter.className}>{children}</body>

diff --git a/packages/abjad-web/src/app/page.tsx b/packages/abjad-web/src/app/page.tsx
@@ -1,83 +1,102 @@
 'use client'
 
 import { useState } from 'react'
+import Select from 'react-select'
 import { Abjad, convert } from 'abjad-convert'
 
 export default function Home() {
 	const [textBoxValue, setTextBoxValue] = useState('')
 	const [resultText, setResultText] = useState('')
+	const [fromValue, setFromValue] = useState<Abjad | undefined>(Abjad.Arabic)
+	const [toValue, setToValue] = useState<Abjad | undefined>(Abjad.ImperialAramaic)
 
+	const options = [
+		{ value: Abjad.Arabic, label: 'Arabic ابجد' },
+		{ value: Abjad.ImperialAramaic, label: 'Imperial Aramaic 𐡀𐡁𐡂𐡃' },
+		{ value: Abjad.Phoenician, label: 'Phoenician 𐤀𐤁𐤂𐤃' },
+		{ value: Abjad.Syriac, label: 'Syriac ܐܒܓܕ' },
+		{ value: Abjad.Tifinagh, label: 'Tifinagh ⴰⴱⵊⴷ' },
+		{ value: Abjad.Ugaritic, label: 'Ugaritic 𐎀𐎁𐎂𐎄' },
+	]
+	const FromSelect = () => <div style={{ marginBottom: '10px' }}>
+		<label htmlFor="fromDropdown" style={{ marginRight: '10px' }}>
+			From:
+		</label>
+		<Select
+			id="fromDropdown"
+			isSearchable={false}
+			options={options}
+			defaultValue={options[0]}
+			onChange={(selectedOption) => {
+				setFromValue(selectedOption?.value)
+				if (!selectedOption?.value || !toValue) {
+					return
+				}
+				const result = convert(textBoxValue, selectedOption?.value, toValue)
+				setResultText(result)
+			}}
+		/>
+	</div>
+	const ToSelect = () => <div style={{ marginBottom: '10px' }}>
+		<label htmlFor="toDropdown" style={{ marginRight: '10px' }}>
+			To:
+		</label>
+		<Select
+			id="toDropdown"
+			isSearchable={false}
+			options={options}
+			defaultValue={options[1]}
+			onChange={(selectedOption) => {
+				setToValue(selectedOption?.value)
+				if (!fromValue || !selectedOption?.value) {
+					return
+				}
+				const result = convert(textBoxValue, fromValue, selectedOption?.value)
+				setResultText(result)
+			}}
+		/>
+	</div>
 	const handleConvert = () => {
-		const fromDropdown = document.getElementById('fromDropdown') as HTMLSelectElement
-		const fromValue = fromDropdown.value as Abjad
-		const toDropdown = document.getElementById('toDropdown') as HTMLSelectElement
-		const toValue = toDropdown.value as Abjad
+		if (!fromValue || !toValue) {
+			return
+		}
 		const result = convert(textBoxValue, fromValue, toValue)
 		setResultText(result)
 	}
 
 	return (
 		<main style={{ textAlign: 'center', padding: '20px' }}>
 			<h1>Abjad Converter</h1>
-
-			<div style={{ marginBottom: '10px' }}>
-				<label htmlFor="fromDropdown" style={{ marginRight: '10px' }}>
-					From:
-				</label>
-				<select id="fromDropdown">
-					<option value={Abjad.Arabic}>Arabic</option>
-					<option value={Abjad.ImperialAramaic}>Imperial Aramaic</option>
-					<option value={Abjad.Phoenician}>Phoenician</option>
-					<option value={Abjad.Syriac}>Syriac</option>
-					<option value={Abjad.Tifinagh}>Tifinagh</option>
-					<option value={Abjad.Ugaritic}>Ugaritic</option>
-				</select>
-			</div>
-
-			<div style={{ marginBottom: '10px' }}>
-				<label htmlFor="toDropdown" style={{ marginRight: '10px' }}>
-					To:
-				</label>
-				<select id="toDropdown">
-					<option value={Abjad.Arabic}>Arabic</option>
-					<option value={Abjad.ImperialAramaic}>Imperial Aramaic</option>
-					<option value={Abjad.Phoenician}>Phoenician</option>
-					<option value={Abjad.Syriac}>Syriac</option>
-					<option value={Abjad.Tifinagh}>Tifinagh</option>
-					<option value={Abjad.Ugaritic}>Ugaritic</option>
-				</select>
-			</div>
-
-			<div style={{ marginBottom: '10px' }}>
-				<label htmlFor="editTextBox" style={{ marginRight: '10px' }}>
-					Enter Text:
-				</label>
-				<textarea
-					id="editTextBox"
-					placeholder="Type here"
-					value={textBoxValue}
-					onChange={(e) => setTextBoxValue(e.target.value)}
-					style={{ padding: '10px', width: '100%', minHeight: '100px' }}
-				/>
-			</div>
-
-			<div style={{ marginBottom: '10px' }}>
-				<button onClick={handleConvert} style={{
-					padding: '10px',
-					backgroundColor: '#4CAF50',
-					color: 'white',
-					border: 'none',
-					borderRadius: '5px'
-				}}>
-					Convert
-				</button>
-			</div>
-
+			{FromSelect()}
+			{ToSelect()}
+			<label htmlFor="editTextBox" style={{ marginRight: '10px' }}>
+				Enter Text:
+			</label>
+			<textarea
+				id="editTextBox"
+				placeholder="Type here"
+				value={textBoxValue}
+				onChange={(e) => {
+					setTextBoxValue(e.target.value)
+					if (!fromValue || !toValue) {
+						return
+					}
+					const result = convert(e.target.value, fromValue, toValue)
+					setResultText(result)
+				}}
+				style={{ padding: '10px', width: '100%', minHeight: '100px', fontSize: '25px' }}
+			/>
 			<div>
 				<label htmlFor="resultLabel" style={{ marginRight: '10px' }}>
 					Result:
 				</label>
-				<span id="resultLabel" style={{ fontWeight: 'bold' }}>{resultText}</span>
+				<br/>
+				<span
+					id="resultLabel"
+					style={{ padding: '10px', width: '100%', minHeight: '100px', fontSize: '25px' }}
+				>
+					{resultText}
+				</span>
 			</div>
 		</main>
 	)