Roman to Decimal (ready to test)

src/App.css

@@ -2,6 +2,11 @@
   text-align: center;
 }
 
+.App input {
+  font-size: 14px;
+  width: 250px;
+}
+
 .App-logo {
   height: 10vmin;
   pointer-events: none;

src/App.js

 import React, { useEffect, useCallback, useState, useMemo } from "react";
 import logo from "./logo.svg";
 import "./App.css";
-import Converter from './helper/converter';
+import Converter from "./helper/converter";
 
 const Inputs = { toDecimal: "toDecimal", toRoman: "toRoman" };
 
@@ -27,27 +27,36 @@ function App() {
   }, [toDecimalValue, toRomanValue]);
 
   // convert values
-  const converted = useMemo(() => {
+  const convertedDecimal = useMemo(() => {
     const romanToBeConverted = toDecimalValue;
+    return Converter.fromRoman(romanToBeConverted);
+  }, [toDecimalValue]);
+
+  const convertedRoman = useMemo(() => {
     const decimalToBeConverted = toRomanValue;
-    return {
-      toDecimal: Converter.fromRoman(romanToBeConverted),
-      toRoman: Converter.toRoman(decimalToBeConverted)
-    };
-  }, [toDecimalValue, toRomanValue]);
+    return Converter.toRoman(decimalToBeConverted);
+  }, [toRomanValue]);
 
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
-        <p>Available range: from 1 to 3999</p>
+        <p>{`Available range: from ${Converter.decimalLimit[0]} to ${Converter.decimalLimit[1]}`}</p>
         <h3>Converter: Roman to Decimal</h3>
-        <input name={Inputs.toDecimal} onChange={handleChange} />
-        <span>Value is: {converted.toDecimal}</span>
-
+        <input
+          name={Inputs.toDecimal}
+          onChange={handleChange}
+          placeholder="Enter Roman number here"
+        />
+        <span>Decimal value is: {convertedDecimal}</span>
+        <span>---</span>
         <h3>Converter: Decimal to Roman</h3>
-        <input name={Inputs.toRoman} onChange={handleChange} />
-        <span>Value is: {converted.toRoman}</span>
+        <input
+          name={Inputs.toRoman}
+          onChange={handleChange}
+          placeholder="Enter Decimal number here"
+        />
+        <span>Roman value is: {convertedRoman}</span>
       </header>
     </div>
   );

src/helper/converter.js

 export default class Converter {
+  // NOTE: there is possible to extend Dictionary: first Add new <letter> : <value> pair then update decimalLimit array
+  static decimalLimit = [1, 3999];
   static Dictionary = {
     I: 1,
     V: 5,
@@ -6,7 +8,9 @@ export default class Converter {
     L: 50,
     C: 100,
     D: 500,
-    M: 1000
+    M: 1000,
+    // K: 5000, // extend Dictionary by adding at least 2 new pairs 
+    // F: 10000,
   };
 
   static _dictionaryValues = Object.values(this.Dictionary).reverse();
@@ -61,8 +65,6 @@ export default class Converter {
     return dictionary;
   }
 
-  static _formatExpression() {}
-
   static _multiplyString(str, times) {
     let res = "";
     for (let i = 0; i < times; i++) {
@@ -74,7 +76,11 @@ export default class Converter {
 
   static toRoman(decimalValue) {
     let romanExpression = "";
-    this._decimalToPropagate = decimalValue;
+    this._decimalToPropagate = +decimalValue;
+
+    if(this._decimalToPropagate < this.decimalLimit[0] || this._decimalToPropagate > this.decimalLimit[1]){
+      return '[Validation error: invalid range]'
+    }
 
     const calculatedDictionary = this._dictionaryNames.reduce(
       (dictionary, sign) => this._extractMultiple(sign, dictionary),
@@ -149,20 +155,40 @@ export default class Converter {
     let result = 0;
     const signs = romanExpression.split("");
 
+    const validated = signs.every(s => this._validateSign(s));
+
+    if(!validated){
+      return '[Validation error]'
+    }
+
     for (let seqIndex = 0; seqIndex < signs.length; ) {
       const currentSign = signs[seqIndex];
       const upperDictionarySign = this._dictionaryNames[
         this._dictionaryNames.indexOf(currentSign) - 1
       ];
+      const upperDictionaryDecimalGroupSign = this._dictionaryNames[
+        this._dictionaryNames.indexOf(currentSign) - 2
+      ];
 
-      if (upperDictionarySign === signs[seqIndex + 1]) {
-        // records like IX CD CM XL
+      if (upperDictionarySign && upperDictionarySign === signs[seqIndex + 1]) {
+        // records like IV CD XL
         const representChunk =
           this.Dictionary[upperDictionarySign] - this.Dictionary[currentSign];
         result += representChunk;
-        seqIndex++;
+        seqIndex += 2;
+      } else if (
+        upperDictionarySign &&
+        this._isSignDescribesDecimalGroup(currentSign) &&
+        upperDictionaryDecimalGroupSign === signs[seqIndex + 1]
+      ) {
+        // records like IX CM XC
+        const representChunk =
+          this.Dictionary[upperDictionaryDecimalGroupSign] -
+          this.Dictionary[currentSign];
+        result += representChunk;
+        seqIndex += 2;
       } else {
-        // records like CCC XX III
+        // records like CCC XX III X I
         const timesToMultiply = this._extractSeqSameSigns(
           signs,
           currentSign,