From 7ce07c22b781092e5023ba6a6f3ff0b5820aaaeb Mon Sep 17 00:00:00 2001 From: Yugay Vasiliy <31739813+Vas9ka@users.noreply.github.com> Date: Tue, 18 Jun 2024 11:29:15 +0200 Subject: [PATCH] Feature/cuneiform converter (#483) * Added Cuneiform Converter * * Added more fonts * Refactorring * make more DRY * add aria-label * refactor tests - move render into beforeEach - select input field by aria label - match html display by snapshot * Added padding between select font and font Selector * Updated snapshot --------- Co-authored-by: fsimonjetz --- .../CuneiformConverterForm.sass | 17 +++ .../CuneiformConverterForm.test.tsx | 57 +++++++++ .../CuneiformConverterForm.tsx | 118 ++++++++++++++++++ .../CuneiformConverterForm.test.tsx.snap | 87 +++++++++++++ src/router/toolsRoutes.tsx | 16 ++- src/signs/application/SignService.ts | 5 +- src/signs/domain/Sign.ts | 3 + src/signs/infrastructure/SignRepository.ts | 7 +- src/signs/ui/search/SignsSearch.tsx | 2 +- 9 files changed, 308 insertions(+), 4 deletions(-) create mode 100644 src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass create mode 100644 src/chronology/ui/CuneiformConverter/CuneiformConverterForm.test.tsx create mode 100644 src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx create mode 100644 src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap diff --git a/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass new file mode 100644 index 000000000..28be0a913 --- /dev/null +++ b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.sass @@ -0,0 +1,17 @@ +textarea.form-control + font-size: 150% + + &.assurbanipal + font-family: Assurbanipal, Junicode, serif + + &.esagil + font-family: 'Neo-Babylonian', Junicode, serif + + &.santakku + font-family: 'Old-Babylonian Cursive', Junicode, serif + + &.santakkum + font-family: 'Old-Babylonian (Monumental)', Junicode, serif + + &.ullikummia + font-family: 'Hittite', Junicode, serif diff --git a/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.test.tsx b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.test.tsx new file mode 100644 index 000000000..7781a3773 --- /dev/null +++ b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.test.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import { fireEvent, render, screen, waitFor } from '@testing-library/react' +import CuneiformConverterForm from 'chronology/ui/CuneiformConverter/CuneiformConverterForm' +import SignService from 'signs/application/SignService' + +jest.mock('signs/application/SignService') +const signServiceMock = new (SignService as jest.Mock< + jest.Mocked +>)() + +let container: HTMLElement + +describe('CuneiformConverterForm', () => { + beforeEach(() => { + Object.defineProperty(window.navigator, 'clipboard', { + value: { + writeText: jest.fn().mockResolvedValue(true), + }, + writable: true, + }) + container = render() + .container + }) + + afterEach(() => { + jest.resetAllMocks() + }) + + it('renders form, options, and scenario panel correctly', () => { + expect(container).toMatchSnapshot() + }) + it('handles input change', () => { + const inputTextArea = screen.getByLabelText('input-atf') + fireEvent.change(inputTextArea, { target: { value: 'test text' } }) + expect(inputTextArea).toHaveValue('test text') + }) + it('handles font change', () => { + const fontSelector = screen.getByLabelText('Select Font') + fireEvent.change(fontSelector, { target: { value: 'Esagil' } }) + expect(fontSelector).toHaveValue('Esagil') + }) + it('converts text correctly', async () => { + signServiceMock.getUnicodeFromAtf.mockResolvedValueOnce([ + { unicode: [73979] }, + ]) + + const inputTextArea = screen.getByLabelText('input-atf') + fireEvent.change(inputTextArea, { target: { value: 'test text' } }) + + const convertButton = screen.getByText('Convert') + fireEvent.click(convertButton) + + await waitFor(() => { + expect(screen.getByLabelText('Converted Text')).toHaveValue('𒃻') + }) + }) +}) diff --git a/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx new file mode 100644 index 000000000..4ab0c0112 --- /dev/null +++ b/src/chronology/ui/CuneiformConverter/CuneiformConverterForm.tsx @@ -0,0 +1,118 @@ +import React, { useState } from 'react' +import { Form, Button } from 'react-bootstrap' +import Bluebird from 'bluebird' +import SignService from 'signs/application/SignService' +import replaceTransliteration from 'fragmentarium/domain/replaceTransliteration' +import { displayUnicode } from 'signs/ui/search/SignsSearch' +import './CuneiformConverterForm.sass' + +function CuneiformConverterForm({ + signService, +}: { + signService: SignService +}): JSX.Element { + const [content, setContent] = useState('') + const [convertedContent, setConvertedContent] = useState('') + const [selectedFont, setSelectedFont] = useState('Assurbanipal') + + const handleChange = (event) => { + setContent(event.target.value) + } + + const handleConvert = () => { + const lines = content.split('\n') + const replacedLines = lines.map((line) => replaceTransliteration(line)) + + Promise.all( + replacedLines + .filter((line) => line.trim() !== '') + .map((line) => query(line)) + ) + .then((results) => { + const convertedText = results + .map((result) => + result + .map((entry) => + entry.unicode[0] === 9999 ? ' ' : displayUnicode(entry.unicode) + ) + .join('') + ) + .join('\n') + + setConvertedContent(convertedText) + }) + .catch((error) => { + console.error('Query Error:', error) + }) + } + + const query = (content) => { + return Bluebird.resolve(signService.getUnicodeFromAtf(content)) + } + + const handleKeyDown = (event) => { + if (event.key === 'Enter' && event.shiftKey) { + event.preventDefault() + handleConvert() + } + } + + const handleFontChange = (event) => { + setSelectedFont(event.target.value) + } + + return ( + <> + + This tool allows to convert transliterations to Unicode cuneiform + (ranges U+12000-U+123FF, U+12400-U+1247F, and U+12480-U+1254F), using + the mapping from the eBL sign list. Different fonts, developed by S. + Vanseveren, can be used to display the cuneiform text. + + + + Enter the text you want to convert to Unicode. + + + Select Font + + +

+ +

+ Converted Text + + + This is the converted Unicode text. + + + ) +} + +export default CuneiformConverterForm diff --git a/src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap b/src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap new file mode 100644 index 000000000..2ff5045b2 --- /dev/null +++ b/src/chronology/ui/CuneiformConverter/__snapshots__/CuneiformConverterForm.test.tsx.snap @@ -0,0 +1,87 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CuneiformConverterForm renders form, options, and scenario panel correctly 1`] = ` +
+ +