From ff8645c8e212018dd9ab3f5e64741ad5e95b0fe0 Mon Sep 17 00:00:00 2001
From: mitsuyapega <mitsuya.kashiwa@pega.com>
Date: Fri, 13 Dec 2024 16:12:29 +0900
Subject: [PATCH] fixup! feat: japanese input

---
 .../Pega_Extensions_JapaneseInput/Docs.mdx    |  9 +++-
 .../Pega_Extensions_JapaneseInput/index.tsx   | 41 +------------------
 .../Pega_Extensions_JapaneseInput/utils.ts    | 40 ++++++++++++++++++
 3 files changed, 49 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Pega_Extensions_JapaneseInput/utils.ts

diff --git a/src/components/Pega_Extensions_JapaneseInput/Docs.mdx b/src/components/Pega_Extensions_JapaneseInput/Docs.mdx
index bdf9072..a21f808 100644
--- a/src/components/Pega_Extensions_JapaneseInput/Docs.mdx
+++ b/src/components/Pega_Extensions_JapaneseInput/Docs.mdx
@@ -5,7 +5,14 @@ import * as DemoStories from './demo.stories';
 
 # Overview
 
-This component that converts Japanese input, such as kana characters and full-width characters.
+Japanese input component has the following features.
+
+- Lowercase to Uppercase  
+  Converts Lowercase to Uppercase, for when the client inputs lowercase and the internal character handles it as uppercase.
+- Hiragana to Katakana  
+  Japanese has two types of characters, Hiragana and Katakana, which correspond one-to-one. Hiragana input is converted to Katakana.
+- Full-width to Half-width  
+  In Japanese, characters are generally handled as multi-byte full-width characters rather than single-byte half-width characters, and for this reason Japanese keyboards have a function to input characters in full-width. Some full-width characters have the same meaning in half-width, and these are converted from full-width to half-width.
 
 <Primary />
 
diff --git a/src/components/Pega_Extensions_JapaneseInput/index.tsx b/src/components/Pega_Extensions_JapaneseInput/index.tsx
index f57561e..01933d9 100644
--- a/src/components/Pega_Extensions_JapaneseInput/index.tsx
+++ b/src/components/Pega_Extensions_JapaneseInput/index.tsx
@@ -14,6 +14,7 @@ import {
 } from '@pega/cosmos-react-core';
 import '../create-nonce';
 import type { FieldValueVariant } from '@pega/cosmos-react-core/lib/components/FieldValueList/FieldValueList';
+import { convertHiraganaToKatakana, fullWidthToHalfWidth } from './utils';
 
 enum DisplayMode {
   DisplayOnly = 'DISPLAY_ONLY',
@@ -132,46 +133,6 @@ export const PegaExtensionsJapaneseInput: FC<PegaExtensionsJapaneseInputProps> =
       hasValueChange.current = false;
     }
 
-    const convertHiraganaToKatakana = (str: string) => {
-      return str.replace(/[\u3041-\u3096]/g, match => {
-        return String.fromCharCode(match.charCodeAt(0) + 0x60);
-      });
-    };
-
-    const fullWidthToHalfWidth = (str: string): string => {
-      str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, match => {
-        return String.fromCharCode(match.charCodeAt(0) - 0xfee0);
-      });
-      // prettier-ignore
-      const kanaMap: Record<string, string> = {
-        ガ: 'ｶﾞ', ギ: 'ｷﾞ', グ: 'ｸﾞ', ゲ: 'ｹﾞ', ゴ: 'ｺﾞ',
-        ザ: 'ｻﾞ', ジ: 'ｼﾞ', ズ: 'ｽﾞ', ゼ: 'ｾﾞ', ゾ: 'ｿﾞ',
-        ダ: 'ﾀﾞ', ヂ: 'ﾁﾞ', ヅ: 'ﾂﾞ', デ: 'ﾃﾞ', ド: 'ﾄﾞ',
-        バ: 'ﾊﾞ', ビ: 'ﾋﾞ', ブ: 'ﾌﾞ', ベ: 'ﾍﾞ', ボ: 'ﾎﾞ',
-        パ: 'ﾊﾟ', ピ: 'ﾋﾟ', プ: 'ﾌﾟ', ペ: 'ﾍﾟ', ポ: 'ﾎﾟ',
-        ヴ: 'ｳﾞ', ヷ: 'ﾜﾞ', ヺ: 'ｦﾞ',
-        ア: 'ｱ', イ: 'ｲ', ウ: 'ｳ', エ: 'ｴ', オ: 'ｵ',
-        カ: 'ｶ', キ: 'ｷ', ク: 'ｸ', ケ: 'ｹ', コ: 'ｺ',
-        サ: 'ｻ', シ: 'ｼ', ス: 'ｽ', セ: 'ｾ', ソ: 'ｿ',
-        タ: 'ﾀ', チ: 'ﾁ', ツ: 'ﾂ', テ: 'ﾃ', ト: 'ﾄ',
-        ナ: 'ﾅ', ニ: 'ﾆ', ヌ: 'ﾇ', ネ: 'ﾈ', ノ: 'ﾉ',
-        ハ: 'ﾊ', ヒ: 'ﾋ', フ: 'ﾌ', ヘ: 'ﾍ', ホ: 'ﾎ',
-        マ: 'ﾏ', ミ: 'ﾐ', ム: 'ﾑ', メ: 'ﾒ', モ: 'ﾓ',
-        ヤ: 'ﾔ', ユ: 'ﾕ', ヨ: 'ﾖ',
-        ラ: 'ﾗ', リ: 'ﾘ', ル: 'ﾙ', レ: 'ﾚ', ロ: 'ﾛ',
-        ワ: 'ﾜ', ヲ: 'ｦ', ン: 'ﾝ',
-        ァ: 'ｧ', ィ: 'ｨ', ゥ: 'ｩ', ェ: 'ｪ', ォ: 'ｫ',
-        ッ: 'ｯ', ャ: 'ｬ', ュ: 'ｭ', ョ: 'ｮ',
-        '。': '｡', '、': '､', ー: 'ｰ', '「': '｢', '」': '｣', '・': '･'
-      };
-      const reg = new RegExp(`(${Object.keys(kanaMap).join('|')})`, 'g');
-      return str
-        .replace(reg, match => {
-          return kanaMap[match];
-        })
-        .replace(/゛/g, 'ﾞ')
-        .replace(/゜/g, 'ﾟ');
-    };
     let newValue = event.target.value;
     if (hiraganaToKatakana) {
       newValue = convertHiraganaToKatakana(newValue);
diff --git a/src/components/Pega_Extensions_JapaneseInput/utils.ts b/src/components/Pega_Extensions_JapaneseInput/utils.ts
new file mode 100644
index 0000000..6985d1b
--- /dev/null
+++ b/src/components/Pega_Extensions_JapaneseInput/utils.ts
@@ -0,0 +1,40 @@
+export const convertHiraganaToKatakana = (str: string) => {
+  return str.replace(/[\u3041-\u3096]/g, match => {
+    return String.fromCharCode(match.charCodeAt(0) + 0x60);
+  });
+};
+
+export const fullWidthToHalfWidth = (str: string): string => {
+  str = str.replace(/[Ａ-Ｚａ-ｚ０-９]/g, match => {
+    return String.fromCharCode(match.charCodeAt(0) - 0xfee0);
+  });
+  // prettier-ignore
+  const kanaMap: Record<string, string> = {
+    ガ: 'ｶﾞ', ギ: 'ｷﾞ', グ: 'ｸﾞ', ゲ: 'ｹﾞ', ゴ: 'ｺﾞ',
+    ザ: 'ｻﾞ', ジ: 'ｼﾞ', ズ: 'ｽﾞ', ゼ: 'ｾﾞ', ゾ: 'ｿﾞ',
+    ダ: 'ﾀﾞ', ヂ: 'ﾁﾞ', ヅ: 'ﾂﾞ', デ: 'ﾃﾞ', ド: 'ﾄﾞ',
+    バ: 'ﾊﾞ', ビ: 'ﾋﾞ', ブ: 'ﾌﾞ', ベ: 'ﾍﾞ', ボ: 'ﾎﾞ',
+    パ: 'ﾊﾟ', ピ: 'ﾋﾟ', プ: 'ﾌﾟ', ペ: 'ﾍﾟ', ポ: 'ﾎﾟ',
+    ヴ: 'ｳﾞ', ヷ: 'ﾜﾞ', ヺ: 'ｦﾞ',
+    ア: 'ｱ', イ: 'ｲ', ウ: 'ｳ', エ: 'ｴ', オ: 'ｵ',
+    カ: 'ｶ', キ: 'ｷ', ク: 'ｸ', ケ: 'ｹ', コ: 'ｺ',
+    サ: 'ｻ', シ: 'ｼ', ス: 'ｽ', セ: 'ｾ', ソ: 'ｿ',
+    タ: 'ﾀ', チ: 'ﾁ', ツ: 'ﾂ', テ: 'ﾃ', ト: 'ﾄ',
+    ナ: 'ﾅ', ニ: 'ﾆ', ヌ: 'ﾇ', ネ: 'ﾈ', ノ: 'ﾉ',
+    ハ: 'ﾊ', ヒ: 'ﾋ', フ: 'ﾌ', ヘ: 'ﾍ', ホ: 'ﾎ',
+    マ: 'ﾏ', ミ: 'ﾐ', ム: 'ﾑ', メ: 'ﾒ', モ: 'ﾓ',
+    ヤ: 'ﾔ', ユ: 'ﾕ', ヨ: 'ﾖ',
+    ラ: 'ﾗ', リ: 'ﾘ', ル: 'ﾙ', レ: 'ﾚ', ロ: 'ﾛ',
+    ワ: 'ﾜ', ヲ: 'ｦ', ン: 'ﾝ',
+    ァ: 'ｧ', ィ: 'ｨ', ゥ: 'ｩ', ェ: 'ｪ', ォ: 'ｫ',
+    ッ: 'ｯ', ャ: 'ｬ', ュ: 'ｭ', ョ: 'ｮ',
+    '。': '｡', '、': '､', ー: 'ｰ', '「': '｢', '」': '｣', '・': '･'
+  };
+  const reg = new RegExp(`(${Object.keys(kanaMap).join('|')})`, 'g');
+  return str
+    .replace(reg, match => {
+      return kanaMap[match];
+    })
+    .replace(/゛/g, 'ﾞ')
+    .replace(/゜/g, 'ﾟ');
+};