Merge pull request #107 from mitsuyapega/japanese-input

Japanese text conversion input

src/components/Pega_Extensions_JapaneseInput/Docs.mdx

@@ -0,0 +1,21 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as DemoStories from './demo.stories';
+
+<Meta of={DemoStories} />
+
+# Overview
+
+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 />
+
+## Props
+
+<Controls />

src/components/Pega_Extensions_JapaneseInput/config.json

@@ -0,0 +1,129 @@
+{
+  "name": "Pega_Extensions_JapaneseInput",
+  "label": "Japanese Input",
+  "description": "",
+  "organization": "Pega",
+  "version": "1.0.0",
+  "library": "Extensions",
+  "allowedApplications": [],
+  "componentKey": "Pega_Extensions_JapaneseInput",
+  "type": "Field",
+  "subtype": "Text",
+  "icon": "images/pz-text-input-active.svg",
+  "properties": [
+    {
+      "name": "label",
+      "label": "Field label",
+      "format": "TEXT",
+      "required": true
+    },
+    {
+      "name": "readOnly",
+      "label": "Edit mode",
+      "format": "READONLY"
+    },
+    {
+      "label": "Column settings",
+      "format": "GROUP",
+      "visibility": "@VIEWTYPE == 'MultiRecordDisplayAsTable'",
+      "properties": [
+        {
+          "name": "columnWidth",
+          "label": "Column width",
+          "format": "SELECT",
+          "source": [
+            {
+              "key": "auto",
+              "value": "Auto"
+            },
+            {
+              "key": "custom",
+              "value": "Custom"
+            }
+          ]
+        },
+        {
+          "name": "width",
+          "label": "Width (px)",
+          "format": "NUMBER",
+          "visibility": "$this.columnWidth == 'custom'"
+        }
+      ]
+    },
+    {
+      "label": "Input settings",
+      "format": "GROUP",
+      "visibility": "(!readOnly = true)",
+      "properties": [
+        {
+          "name": "placeholder",
+          "label": "Placeholder",
+          "format": "TEXT"
+        },
+        {
+          "name": "helperText",
+          "label": "Helper text",
+          "format": "TEXT"
+        },
+        {
+          "name": "hiraganaToKatakana",
+          "label": "Hiragana to Katakana",
+          "format": "BOOLEAN"
+        },
+        {
+          "name": "fullToHalf",
+          "label": "Full-Width to Half-Width",
+          "format": "BOOLEAN"
+        },
+        {
+          "name": "lowerToUpper",
+          "label": "Lowercase to Uppercase",
+          "format": "BOOLEAN"
+        }
+      ]
+    },
+    {
+      "label": "Conditions",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "required",
+          "label": "Required",
+          "format": "REQUIRED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "disabled",
+          "label": "Disabled",
+          "format": "DISABLED",
+          "visibility": "(!readOnly = true)"
+        },
+        {
+          "name": "visibility",
+          "label": "Visibility",
+          "format": "VISIBILITY"
+        }
+      ]
+    },
+    {
+      "label": "Advanced",
+      "format": "GROUP",
+      "collapsible": true,
+      "properties": [
+        {
+          "name": "testId",
+          "label": "Test ID",
+          "format": "TEXT",
+          "ignorePattern": "[^-_\\p{N}\\p{L}]",
+          "includeAnnotations": false
+        }
+      ]
+    }
+  ],
+  "defaultConfig": {
+    "label": "@L $this.label",
+    "detailFVLItem": true,
+    "isFormWidth": false,
+    "isContainerWidth": false
+  }
+}

src/components/Pega_Extensions_JapaneseInput/demo.stories.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable react/jsx-no-useless-fragment */
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PegaExtensionsJapaneseInput } from './index';
+
+const meta: Meta<typeof PegaExtensionsJapaneseInput> = {
+  title: 'Fields/Japanese Input',
+  component: PegaExtensionsJapaneseInput,
+  excludeStories: /.*Data$/
+};
+
+export default meta;
+type Story = StoryObj<typeof PegaExtensionsJapaneseInput>;
+
+const setPCore = () => {
+  (window as any).PCore = {
+    getComponentsRegistry: () => {
+      return {
+        getLazyComponent: (f: string) => f
+      };
+    },
+    getEnvironmentInfo: () => {
+      return {
+        getTimeZone: () => 'local'
+      };
+    }
+  };
+};
+
+export const Default: Story = {
+  render: args => {
+    setPCore();
+    const props = {
+      ...args,
+      getPConnect: () => {
+        return {
+          getStateProps: () => {
+            return {
+              value: '.TextInputSample'
+            };
+          },
+          getActionsApi: () => {
+            return {
+              updateFieldValue: () => {
+                /* nothing */
+              },
+              triggerFieldChange: () => {
+                /* nothing */
+              }
+            };
+          },
+          ignoreSuggestion: () => {
+            /* nothing */
+          },
+          acceptSuggestion: () => {
+            /* nothing */
+          },
+          setInheritedProps: () => {
+            /* nothing */
+          },
+          resolveConfigProps: () => {
+            /* nothing */
+          }
+        };
+      }
+    };
+    return <PegaExtensionsJapaneseInput {...props} />;
+  },
+  args: {
+    label: 'TextInput Sample',
+    info: 'TextInput Helper Text',
+    placeholder: 'TextInput Placeholder',
+    testId: 'TextInput-12345678',
+    readOnly: false,
+    disabled: false,
+    required: false,
+    labelHidden: false,
+    displayMode: undefined,
+    variant: undefined,
+    errorMessage: '',
+    hiraganaToKatakana: false,
+    fullToHalf: false,
+    lowerToUpper: false
+  }
+};

src/components/Pega_Extensions_JapaneseInput/demo.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import { composeStories } from '@storybook/react';
+import * as DemoStories from './demo.stories';
+
+const { Default } = composeStories(DemoStories);
+
+test('renders Japanese Input component with default args', async () => {
+  render(<Default />);
+  expect(await screen.findByText('TextInput Sample')).toBeVisible();
+});