From aa55cb74f63bca93ecef5c8154b0122182ad0ba5 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 19 Mar 2024 17:31:20 -0400 Subject: [PATCH 01/19] fix(app): update software keyboard components to align with the latest design First change component name close AUTH-133 --- .../NumericalKeyboard.stories.tsx} | 32 ++++-- .../__tests__/NumericalKeyboard.test.tsx | 98 +++++++++++++++++++ .../NumericalKeyboard/index.css | 27 +++++ .../NumericalKeyboard/index.tsx | 48 +++++++++ .../Numpad/__tests__/Numpad.test.tsx | 53 ---------- .../atoms/SoftwareKeyboard/Numpad/index.css | 7 -- .../atoms/SoftwareKeyboard/Numpad/index.tsx | 34 ------- app/src/atoms/SoftwareKeyboard/index.ts | 2 +- 8 files changed, 199 insertions(+), 102 deletions(-) rename app/src/atoms/SoftwareKeyboard/{Numpad/Numpad.stories.tsx => NumericalKeyboard/NumericalKeyboard.stories.tsx} (63%) create mode 100644 app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx create mode 100644 app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css create mode 100644 app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx delete mode 100644 app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx delete mode 100644 app/src/atoms/SoftwareKeyboard/Numpad/index.css delete mode 100644 app/src/atoms/SoftwareKeyboard/Numpad/index.tsx diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx similarity index 63% rename from app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx rename to app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx index f87ca54481b..2f22a95cafe 100644 --- a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx @@ -1,25 +1,36 @@ import * as React from 'react' import { - Flex, DIRECTION_COLUMN, + Flex, POSITION_ABSOLUTE, SPACING, } from '@opentrons/components' import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' -import { Numpad } from './' +import { NumericalKeyboard } from '.' import '../index.css' import './index.css' import type { Story, Meta } from '@storybook/react' export default { - title: 'ODD/Atoms/SoftwareKeyboard/Numpad', - component: Numpad, + title: 'ODD/Atoms/SoftwareKeyboard/NumericalKeyboard', + component: NumericalKeyboard, parameters: touchScreenViewport, + argTypes: { + isDecimal: { + control: { + type: 'boolean', + options: [true, false], + }, + defaultValue: false, + }, + }, } as Meta -const Template: Story> = args => { +const Template: Story< + React.ComponentProps +> = args => { const [showKeyboard, setShowKeyboard] = React.useState(false) const [value, setValue] = React.useState('') const keyboardRef = React.useRef(null) @@ -30,14 +41,18 @@ const Template: Story> = args => { value={value} type="text" placeholder="When focusing, the numpad shows up" - onFocus={() => setShowKeyboard(true)} + onFocus={() => { + setShowKeyboard(true) + }} /> {showKeyboard && ( - e != null && setValue(String(e))} keyboardRef={keyboardRef} + isDecimal={args.isDecimal} /> )} @@ -46,3 +61,6 @@ const Template: Story> = args => { } export const NormalSoftwareKeyboard = Template.bind({}) +NormalSoftwareKeyboard.args = { + isDecimal: false, +} diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx new file mode 100644 index 00000000000..bdcf7cd60f7 --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx @@ -0,0 +1,98 @@ +import * as React from 'react' +import { describe, it, expect, vi } from 'vitest' +import '@testing-library/jest-dom/vitest' +import { fireEvent, renderHook, screen } from '@testing-library/react' +import { renderWithProviders } from '../../../../__testing-utils__' +import { NumericalKeyboard } from '..' + +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] +} + +describe('NumericalKeyboard', () => { + it('should render the numpad keys decimal off', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: false, + } + render(props) + const buttons = screen.getAllByRole('button') + const expectedButtonNames = [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '', + '0', + 'del', + ] + + buttons.forEach((button, index) => { + const expectedName = expectedButtonNames[index] + expect(button).toHaveTextContent(expectedName) + }) + }) + + it('should render the numpad keys decimal on', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: true, + } + render(props) + const buttons = screen.getAllByRole('button') + const expectedButtonNames = [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '.', + '0', + 'del', + ] + + buttons.forEach((button, index) => { + const expectedName = expectedButtonNames[index] + expect(button).toHaveTextContent(expectedName) + }) + }) + + it('should call mock function when clicking num key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: false, + } + render(props) + const numKey = screen.getByRole('button', { name: '1' }) + fireEvent.click(numKey) + expect(props.onChange).toHaveBeenCalled() + }) + + it('should call mock function when clicking decimal point key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: true, + } + render(props) + const numKey = screen.getByRole('button', { name: '.' }) + fireEvent.click(numKey) + expect(props.onChange).toHaveBeenCalled() + }) +}) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css new file mode 100644 index 00000000000..40c458802d3 --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css @@ -0,0 +1,27 @@ +/* stylelint-disable */ + +.numerical-keyboard button.hg-button.hg-button-backspace, +.numerical-keyboard button.hg-button.hg-button-abc, +.numerical-keyboard button.hg-button.hg-standardBtn { + flex: 1; +} + +.numerical-keyboard button.hg-button.hg-button-backspace span, +.numerical-keyboard button.hg-button.hg-button-abc span, +.numerical-keyboard button.hg-button.hg-standardBtn span { + text-align: center; + font-size: 20px; + font-weight: 600; + line-height: 24px; +} + +div:nth-child(4) .hg-button.hg-standardBtn:nth-child(1) { + background-color: transparent; + box-shadow: none; + cursor: none; +} + +.numerical-keyboard button.hg-button.hg-standardBtn.hg-decimal-point { + background-color: #fff; + cursor: pointer; +} diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx new file mode 100644 index 00000000000..3808a65c169 --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx @@ -0,0 +1,48 @@ +import * as React from 'react' +import Keyboard from 'react-simple-keyboard' + +const customDisplay = { + '{backspace}': 'del', +} +interface NumericalKeyboardProps { + onChange: (input: string) => void + keyboardRef: React.MutableRefObject + isDecimal?: boolean +} + +const decimalOffKeyboard = ['1 2 3', '4 5 6', '7 8 9', ' 0 {backspace}'] +const decimalOnKeyboard = ['1 2 3', '4 5 6', '7 8 9', '. 0 {backspace}'] + +export function NumericalKeyboard({ + onChange, + keyboardRef, + isDecimal = false, +}: NumericalKeyboardProps): JSX.Element { + const numericalKeyboard = { + layout: { + default: isDecimal ? decimalOnKeyboard : decimalOffKeyboard, + }, + } + return ( + /* + * autoUseTouchEvents: for Flex on-device app + * useButtonTag: this is for testing purpose that each key renders as a button + */ + (keyboardRef.current = r)} + theme={'hg-theme-default oddTheme1 numerical-keyboard'} + onChange={onChange} + layoutName="default" + buttonTheme={[ + { + class: 'hg-decimal-point', + buttons: '.', + }, + ]} + display={customDisplay} + autoUseTouchEvents={true} + useButtonTag={true} + {...numericalKeyboard} + /> + ) +} diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx deleted file mode 100644 index f9c90938eba..00000000000 --- a/app/src/atoms/SoftwareKeyboard/Numpad/__tests__/Numpad.test.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react' -import { describe, it, expect, vi } from 'vitest' -import '@testing-library/jest-dom/vitest' -import { fireEvent, renderHook, screen } from '@testing-library/react' -import { renderWithProviders } from '../../../../__testing-utils__' -import { Numpad } from '..' - -const render = (props: React.ComponentProps) => { - return renderWithProviders()[0] -} - -describe('Numpad', () => { - it('should render the numpad keys', () => { - const { result } = renderHook(() => React.useRef(null)) - const props = { - onChange: vi.fn(), - keyboardRef: result.current, - } - render(props) - const buttons = screen.getAllByRole('button') - const expectedButtonNames = [ - '7', - '8', - '9', - '4', - '5', - '6', - '1', - '2', - '3', - '0', - '.', - 'del', - ] - - buttons.forEach((button, index) => { - const expectedName = expectedButtonNames[index] - expect(button).toHaveTextContent(expectedName) - }) - }) - - it('should call mock function when clicking num key', () => { - const { result } = renderHook(() => React.useRef(null)) - const props = { - onChange: vi.fn(), - keyboardRef: result.current, - } - render(props) - const numKey = screen.getByRole('button', { name: '1' }) - fireEvent.click(numKey) - expect(props.onChange).toHaveBeenCalled() - }) -}) diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/index.css b/app/src/atoms/SoftwareKeyboard/Numpad/index.css deleted file mode 100644 index 7d832afeb2f..00000000000 --- a/app/src/atoms/SoftwareKeyboard/Numpad/index.css +++ /dev/null @@ -1,7 +0,0 @@ -/* stylelint-disable */ - -.numpad button.hg-button.hg-button-backspace, -.numpad button.hg-button.hg-button-abc, -.numpad button.hg-button.hg-standardBtn { - flex: 1; -} diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/index.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/index.tsx deleted file mode 100644 index b16b950fada..00000000000 --- a/app/src/atoms/SoftwareKeyboard/Numpad/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react' -import Keyboard from 'react-simple-keyboard' - -const customDisplay = { - '{backspace}': 'del', -} -interface NumpadProps { - onChange: (input: string) => void - keyboardRef: React.MutableRefObject -} - -export function Numpad({ onChange, keyboardRef }: NumpadProps): JSX.Element { - const keyboardNumpad = { - layout: { - default: ['7 8 9', '4 5 6', '1 2 3', '0 . {backspace}'], - }, - } - return ( - /* - * autoUseTouchEvents: for Flex on-device app - * useButtonTag: this is for testing purpose that each key renders as a button - */ - (keyboardRef.current = r)} - theme={'hg-theme-default oddTheme1 numpad'} - onChange={onChange} - layoutName="default" - display={customDisplay} - autoUseTouchEvents={true} - useButtonTag={true} - {...keyboardNumpad} - /> - ) -} diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts index 93ae28749ac..a29cd6a3cc4 100644 --- a/app/src/atoms/SoftwareKeyboard/index.ts +++ b/app/src/atoms/SoftwareKeyboard/index.ts @@ -1,3 +1,3 @@ export { CustomKeyboard } from './CustomKeyboard' export { NormalKeyboard } from './NormalKeyboard' -export { Numpad } from './Numpad' +export { Numpad } from './NumericalKeyboard' From 576fc0c202febba438c5b1fe0a733b9cf72b3e24 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 19 Mar 2024 17:46:31 -0400 Subject: [PATCH 02/19] change the const name --- .../NumericalKeyboard/NumericalKeyboard.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx index 2f22a95cafe..1ad614bbae6 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx @@ -60,7 +60,7 @@ const Template: Story< ) } -export const NormalSoftwareKeyboard = Template.bind({}) -NormalSoftwareKeyboard.args = { +export const Keyboard = Template.bind({}) +Keyboard.args = { isDecimal: false, } From 72498bb93c001f37d4ac71be49d06c3ee3abead1 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 19 Mar 2024 17:49:12 -0400 Subject: [PATCH 03/19] fix export name from index.ts --- app/src/atoms/SoftwareKeyboard/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts index a29cd6a3cc4..4b653497a4b 100644 --- a/app/src/atoms/SoftwareKeyboard/index.ts +++ b/app/src/atoms/SoftwareKeyboard/index.ts @@ -1,3 +1,3 @@ export { CustomKeyboard } from './CustomKeyboard' export { NormalKeyboard } from './NormalKeyboard' -export { Numpad } from './NumericalKeyboard' +export { NumericalKeyboard } from './NumericalKeyboard' From 3032ff9e198e365b3c8218ac92d89b8b5caa75c6 Mon Sep 17 00:00:00 2001 From: koji Date: Wed, 20 Mar 2024 12:14:12 -0400 Subject: [PATCH 04/19] add individual key --- .../IndividualKey/IndividualKey.stories.tsx | 60 +++++++++++++++++++ .../__tests__/IndividualKey.test.tsx | 36 +++++++++++ .../SoftwareKeyboard/IndividualKey/index.css | 8 +++ .../SoftwareKeyboard/IndividualKey/index.tsx | 39 ++++++++++++ app/src/atoms/SoftwareKeyboard/index.ts | 1 + 5 files changed, 144 insertions(+) create mode 100644 app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx create mode 100644 app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx create mode 100644 app/src/atoms/SoftwareKeyboard/IndividualKey/index.css create mode 100644 app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx new file mode 100644 index 00000000000..c62faec02dd --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx @@ -0,0 +1,60 @@ +import * as React from 'react' +import { + DIRECTION_COLUMN, + Flex, + POSITION_ABSOLUTE, + SPACING, +} from '@opentrons/components' +import { touchScreenViewport } from '../../../DesignTokens/constants' +import { InputField } from '../../InputField' +import { IndividualKey } from '.' +import '../index.css' +import './index.css' + +import type { Story, Meta } from '@storybook/react' + +export default { + title: 'ODD/Atoms/SoftwareKeyboard/IndividualKey', + component: IndividualKey, + parameters: touchScreenViewport, + argTypes: { + keyText: { + defaultValue: 'hello otie!', + }, + }, +} as Meta + +const Template: Story> = args => { + const [showKeyboard, setShowKeyboard] = React.useState(false) + const [value, setValue] = React.useState('') + const keyboardRef = React.useRef(null) + return ( + +
+ { + setShowKeyboard(true) + }} + /> + + + {showKeyboard && ( + e != null && setValue(String(e))} + keyboardRef={keyboardRef} + keyText={args.keyText} + /> + )} + +
+ ) +} + +export const Keyboard = Template.bind({}) +Keyboard.args = { + keyText: 'hello otie!', +} diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx new file mode 100644 index 00000000000..f08c7e4566f --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/__tests__/IndividualKey.test.tsx @@ -0,0 +1,36 @@ +import * as React from 'react' +import { describe, it, vi, expect } from 'vitest' +import { fireEvent, renderHook, screen } from '@testing-library/react' + +import { renderWithProviders } from '../../../../__testing-utils__' +import { IndividualKey } from '..' + +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] +} + +describe('IndividualKey', () => { + it('should render the text key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + keyText: 'mockKey', + } + render(props) + screen.getByRole('button', { name: 'mockKey' }) + }) + + it('should call mock function when clicking text key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + keyText: 'mockKey', + } + render(props) + const textKey = screen.getByRole('button', { name: 'mockKey' }) + fireEvent.click(textKey) + expect(props.onChange).toHaveBeenCalled() + }) +}) diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css new file mode 100644 index 00000000000..872f61bbee8 --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css @@ -0,0 +1,8 @@ +.individual-key button.hg-button.hg-button-backspace span, +.individual-key button.hg-button.hg-button-abc span, +.individual-key button.hg-button.hg-standardBtn span { + text-align: center; + font-size: 20px; + font-weight: 600; + line-height: 24px; +} diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx new file mode 100644 index 00000000000..ee251ea5ac9 --- /dev/null +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx @@ -0,0 +1,39 @@ +import * as React from 'react' +import Keyboard from 'react-simple-keyboard' + +const customDisplay = { + '{backspace}': 'del', +} +interface IndividualKeyProps { + onChange: (input: string) => void + keyboardRef: React.MutableRefObject + keyText: string +} + +export function IndividualKey({ + onChange, + keyboardRef, + keyText, +}: IndividualKeyProps): JSX.Element { + const numericalKeyboard = { + layout: { + default: [`${keyText}`], + }, + } + return ( + /* + * autoUseTouchEvents: for Flex on-device app + * useButtonTag: this is for testing purpose that each key renders as a button + */ + (keyboardRef.current = r)} + theme={'hg-theme-default oddTheme1 individual-key'} + onChange={onChange} + layoutName="default" + display={customDisplay} + autoUseTouchEvents={true} + useButtonTag={true} + {...numericalKeyboard} + /> + ) +} diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts index 4b653497a4b..8d27a412c95 100644 --- a/app/src/atoms/SoftwareKeyboard/index.ts +++ b/app/src/atoms/SoftwareKeyboard/index.ts @@ -1,3 +1,4 @@ export { CustomKeyboard } from './CustomKeyboard' +export { IndividualKey } from './IndividualKey' export { NormalKeyboard } from './NormalKeyboard' export { NumericalKeyboard } from './NumericalKeyboard' From e19d95587fa89d63469d4f7bb9eea174928311b2 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 21 Mar 2024 16:14:33 -0400 Subject: [PATCH 05/19] update alphanumeric test --- .../AlphanumericKeyboard.stories.tsx} | 16 ++-- .../__tests__/CustomKeyboard.test.tsx | 80 ++++++++++++++++--- .../index.css | 0 .../index.tsx | 40 ++++------ .../NormalKeyboard.stories.tsx | 0 .../__tests__/NormalKeyboard.test.tsx | 0 .../index.css | 0 .../index.tsx | 0 app/src/atoms/SoftwareKeyboard/constants.ts | 16 ++++ app/src/atoms/SoftwareKeyboard/index.ts | 2 +- app/src/pages/NameRobot/index.tsx | 4 +- 11 files changed, 111 insertions(+), 47 deletions(-) rename app/src/atoms/SoftwareKeyboard/{CustomKeyboard/CustomKeyboard.stories.tsx => AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx} (78%) rename app/src/atoms/SoftwareKeyboard/{CustomKeyboard => AlphanumericKeyboard}/__tests__/CustomKeyboard.test.tsx (59%) rename app/src/atoms/SoftwareKeyboard/{CustomKeyboard => AlphanumericKeyboard}/index.css (100%) rename app/src/atoms/SoftwareKeyboard/{CustomKeyboard => AlphanumericKeyboard}/index.tsx (52%) rename app/src/atoms/SoftwareKeyboard/{NormalKeyboard => FullKeyboard}/NormalKeyboard.stories.tsx (100%) rename app/src/atoms/SoftwareKeyboard/{NormalKeyboard => FullKeyboard}/__tests__/NormalKeyboard.test.tsx (100%) rename app/src/atoms/SoftwareKeyboard/{NormalKeyboard => FullKeyboard}/index.css (100%) rename app/src/atoms/SoftwareKeyboard/{NormalKeyboard => FullKeyboard}/index.tsx (100%) diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx similarity index 78% rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx rename to app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx index e298911ee0f..fa47977ccfe 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx @@ -1,25 +1,27 @@ import * as React from 'react' import { - Flex, DIRECTION_COLUMN, + Flex, POSITION_ABSOLUTE, SPACING, } from '@opentrons/components' import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' -import { CustomKeyboard } from './' +import { AlphanumericKeyboard } from '.' import '../index.css' import './index.css' import type { Story, Meta } from '@storybook/react' export default { - title: 'ODD/Atoms/SoftwareKeyboard/CustomKeyboard', - component: CustomKeyboard, + title: 'ODD/Atoms/SoftwareKeyboard/AlphanumericKeyboard', + component: AlphanumericKeyboard, parameters: touchScreenViewport, } as Meta -const Template: Story> = args => { +const Template: Story< + React.ComponentProps +> = args => { const [showKeyboard, setShowKeyboard] = React.useState(false) const [value, setValue] = React.useState('') const keyboardRef = React.useRef(null) @@ -35,7 +37,7 @@ const Template: Story> = args => { {showKeyboard && ( - e != null && setValue(String(e))} keyboardRef={keyboardRef} /> @@ -45,4 +47,4 @@ const Template: Story> = args => { ) } -export const CustomSoftwareKeyboard = Template.bind({}) +export const AlphanumericSoftwareKeyboard = Template.bind({}) diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx similarity index 59% rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx rename to app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx index c4c38fad53b..336e0c86026 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/__tests__/CustomKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/__tests__/CustomKeyboard.test.tsx @@ -3,14 +3,14 @@ import { describe, it, expect, vi } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' -import { CustomKeyboard } from '..' +import { AlphanumericKeyboard } from '..' -const render = (props: React.ComponentProps) => { - return renderWithProviders()[0] +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] } -describe('CustomKeyboard', () => { - it('should render the custom keyboards lower case', () => { +describe('AlphanumericKeyboard', () => { + it('should render alphanumeric keyboard - lower case', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), @@ -29,6 +29,7 @@ describe('CustomKeyboard', () => { 'i', 'o', 'p', + '123', 'a', 's', 'd', @@ -38,7 +39,7 @@ describe('CustomKeyboard', () => { 'j', 'k', 'l', - 'SHIFT', + 'ABC', 'z', 'x', 'c', @@ -47,21 +48,20 @@ describe('CustomKeyboard', () => { 'n', 'm', 'del', - '123', ] buttons.forEach((button, index) => { const expectedName = expectedButtonNames[index] expect(button).toHaveTextContent(expectedName) }) }) - it('should render the custom keyboards upper case, when clicking shift key', () => { + it('should render alphanumeric keyboard - upper case, when clicking ABC key', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, } render(props) - const shiftKey = screen.getByRole('button', { name: 'SHIFT' }) + const shiftKey = screen.getByRole('button', { name: 'ABC' }) fireEvent.click(shiftKey) const buttons = screen.getAllByRole('button') @@ -76,6 +76,7 @@ describe('CustomKeyboard', () => { 'I', 'O', 'P', + '123', 'A', 'S', 'D', @@ -94,7 +95,6 @@ describe('CustomKeyboard', () => { 'N', 'M', 'del', - '123', ] buttons.forEach((button, index) => { const expectedName = expectedButtonNames[index] @@ -102,7 +102,7 @@ describe('CustomKeyboard', () => { }) }) - it('should render the custom keyboards numbers, when clicking number key', () => { + it('should render alphanumeric keyboard - numbers, when clicking number key', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), @@ -132,7 +132,7 @@ describe('CustomKeyboard', () => { }) }) - it('should render the custom keyboards lower case, when clicking number key then abc key', () => { + it('should render alphanumeric keyboard - lower case when layout is numbers and clicking abc ', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), @@ -140,9 +140,63 @@ describe('CustomKeyboard', () => { } render(props) const numberKey = screen.getByRole('button', { name: '123' }) - screen.getByRole('button', { name: 'a' }) + fireEvent.click(numberKey) + const abcKey = screen.getByRole('button', { name: 'abc' }) + fireEvent.click(abcKey) + const buttons = screen.getAllByRole('button') + const expectedButtonNames = [ + 'q', + 'w', + 'e', + 'r', + 't', + 'y', + 'u', + 'i', + 'o', + 'p', + '123', + 'a', + 's', + 'd', + 'f', + 'g', + 'h', + 'j', + 'k', + 'l', + 'ABC', + 'z', + 'x', + 'c', + 'v', + 'b', + 'n', + 'm', + 'del', + ] + buttons.forEach((button, index) => { + const expectedName = expectedButtonNames[index] + expect(button).toHaveTextContent(expectedName) + }) + }) + + it('should switch each alphanumeric keyboard properly', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + } + render(props) + // lower case keyboard -> upper case keyboard + const ABCKey = screen.getByRole('button', { name: 'ABC' }) + fireEvent.click(ABCKey) + screen.getByRole('button', { name: 'A' }) + // upper case keyboard -> number keyboard + const numberKey = screen.getByRole('button', { name: '123' }) fireEvent.click(numberKey) screen.getByRole('button', { name: '1' }) + // number keyboard -> lower case keyboard const abcKey = screen.getByRole('button', { name: 'abc' }) fireEvent.click(abcKey) screen.getByRole('button', { name: 'a' }) diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css similarity index 100% rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.css rename to app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx similarity index 52% rename from app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx rename to app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx index ddf9215a874..a0a8de77438 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx @@ -1,36 +1,22 @@ import * as React from 'react' import Keyboard from 'react-simple-keyboard' -import { customDisplay } from '../constants' +import { alphanumericLayout, customDisplay } from '../constants' -interface CustomKeyboardProps { +interface AlphanumericKeyboardProps { onChange: (input: string) => void keyboardRef: React.MutableRefObject } -const customLayout = { - default: [ - 'q w e r t y u i o p', - 'a s d f g h j k l', - '{shift} z x c v b n m {backspace}', - '{numbers}', - ], - shift: [ - 'Q W E R T Y U I O P', - 'A S D F G H J K L', - '{abc} Z X C V B N M {backspace}', - '{numbers}', - ], - numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}'], -} - -export function CustomKeyboard({ +export function AlphanumericKeyboard({ onChange, keyboardRef, -}: CustomKeyboardProps): JSX.Element { +}: AlphanumericKeyboardProps): JSX.Element { const [layoutName, setLayoutName] = React.useState('default') const onKeyPress = (button: string): void => { - if (button === '{shift}' || button === '{lock}') handleShift() - if (button === '{numbers}' || button === '{abc}') handleNumber() + console.log(button) + if (button === '{ABC}') handleShift() + if (button === '{numbers}') handleNumber() + if (button === '{abc}') handleUnShift() } const handleShift = (): void => { @@ -38,7 +24,13 @@ export function CustomKeyboard({ } const handleNumber = (): void => { - setLayoutName(layoutName === 'default' ? 'numbers' : 'default') + setLayoutName( + layoutName === 'default' || layoutName === 'shift' ? 'numbers' : 'default' + ) + } + + const handleUnShift = (): void => { + setLayoutName('default') } return ( @@ -48,7 +40,7 @@ export function CustomKeyboard({ onChange={onChange} onKeyPress={onKeyPress} layoutName={layoutName} - layout={customLayout} + layout={alphanumericLayout} display={customDisplay} mergeDisplay={true} autoUseTouchEvents={true} diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/NormalKeyboard.stories.tsx similarity index 100% rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/NormalKeyboard.stories.tsx diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/NormalKeyboard.test.tsx similarity index 100% rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard/__tests__/NormalKeyboard.test.tsx rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/NormalKeyboard.test.tsx diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css similarity index 100% rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.css rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx similarity index 100% rename from app/src/atoms/SoftwareKeyboard/NormalKeyboard/index.tsx rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index 11fe6f11272..d055acc2ae2 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -4,5 +4,21 @@ export const customDisplay = { '{space}': 'space', '{backspace}': 'del', '{abc}': 'abc', + '{ABC}': 'ABC', '{symbols}': '#+=', } + +// keyboard layout for Alphanumeric Keyboard +export const alphanumericLayout = { + default: [ + 'q w e r t y u i o p', + '{numbers} a s d f g h j k l', + '{ABC} z x c v b n m {backspace}', + ], + shift: [ + 'Q W E R T Y U I O P', + '{numbers} A S D F G H J K L', + '{abc} Z X C V B N M {backspace}', + ], + numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}'], +} diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts index 8d27a412c95..3f7d5f8a7ea 100644 --- a/app/src/atoms/SoftwareKeyboard/index.ts +++ b/app/src/atoms/SoftwareKeyboard/index.ts @@ -1,4 +1,4 @@ -export { CustomKeyboard } from './CustomKeyboard' +export { AlphanumericKeyboard } from './AlphanumericKeyboard' export { IndividualKey } from './IndividualKey' export { NormalKeyboard } from './NormalKeyboard' export { NumericalKeyboard } from './NumericalKeyboard' diff --git a/app/src/pages/NameRobot/index.tsx b/app/src/pages/NameRobot/index.tsx index 63bfc89c916..89ed8ef1170 100644 --- a/app/src/pages/NameRobot/index.tsx +++ b/app/src/pages/NameRobot/index.tsx @@ -32,7 +32,7 @@ import { import { useTrackEvent, ANALYTICS_RENAME_ROBOT } from '../../redux/analytics' import { StyledText } from '../../atoms/text' import { InputField } from '../../atoms/InputField' -import { CustomKeyboard } from '../../atoms/SoftwareKeyboard' +import { AlphanumericKeyboard } from '../../atoms/SoftwareKeyboard' import { SmallButton } from '../../atoms/buttons' import { StepMeter } from '../../atoms/StepMeter' import { useIsUnboxingFlowOngoing } from '../../organisms/RobotSettingsDashboard/NetworkSettings/hooks' @@ -295,7 +295,7 @@ export function NameRobot(): JSX.Element { control={control} name="newRobotName" render={({ field }) => ( - { field.onChange(input) trigger('newRobotName') From 678e05633c71f22507f18fcb768608a295cd6d91 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 21 Mar 2024 17:01:56 -0400 Subject: [PATCH 06/19] update full keyboard layout to the lates layout --- .../AlphanumericKeyboard/index.tsx | 4 +- ...d.stories.tsx => FullKeyboard.stories.tsx} | 12 +++--- .../SoftwareKeyboard/FullKeyboard/index.tsx | 40 +++---------------- .../IndividualKey/IndividualKey.stories.tsx | 7 +--- .../SoftwareKeyboard/IndividualKey/index.tsx | 1 + app/src/atoms/SoftwareKeyboard/constants.ts | 32 ++++++++++++++- app/src/atoms/SoftwareKeyboard/index.ts | 2 +- 7 files changed, 46 insertions(+), 52 deletions(-) rename app/src/atoms/SoftwareKeyboard/FullKeyboard/{NormalKeyboard.stories.tsx => FullKeyboard.stories.tsx} (80%) diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx index a0a8de77438..335b8b5be2f 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import Keyboard from 'react-simple-keyboard' -import { alphanumericLayout, customDisplay } from '../constants' +import { alphanumericKeyboardLayout, customDisplay } from '../constants' interface AlphanumericKeyboardProps { onChange: (input: string) => void @@ -40,7 +40,7 @@ export function AlphanumericKeyboard({ onChange={onChange} onKeyPress={onKeyPress} layoutName={layoutName} - layout={alphanumericLayout} + layout={alphanumericKeyboardLayout} display={customDisplay} mergeDisplay={true} autoUseTouchEvents={true} diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx similarity index 80% rename from app/src/atoms/SoftwareKeyboard/FullKeyboard/NormalKeyboard.stories.tsx rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx index c245ca23be9..d7957d6b00a 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/NormalKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx @@ -7,7 +7,7 @@ import { } from '@opentrons/components' import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' -import { NormalKeyboard } from '.' +import { FullKeyboard } from '.' import '../index.css' import './index.css' @@ -15,12 +15,12 @@ import './index.css' import type { Story, Meta } from '@storybook/react' export default { - title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard', - component: NormalKeyboard, + title: 'ODD/Atoms/SoftwareKeyboard/FullKeyboard', + component: FullKeyboard, parameters: touchScreenViewport, } as Meta -const Template: Story> = args => { +const Template: Story> = args => { const [showKeyboard, setShowKeyboard] = React.useState(false) const [value, setValue] = React.useState('') const keyboardRef = React.useRef(null) @@ -36,7 +36,7 @@ const Template: Story> = args => { {showKeyboard && ( - e != null && setValue(String(e))} keyboardRef={keyboardRef} /> @@ -46,4 +46,4 @@ const Template: Story> = args => { ) } -export const NormalSoftwareKeyboard = Template.bind({}) +export const FullSoftwareKeyboard = Template.bind({}) diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx index dcb02503f00..850ad689758 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.tsx @@ -1,46 +1,16 @@ import * as React from 'react' import Keyboard from 'react-simple-keyboard' -import { customDisplay } from '../constants' +import { customDisplay, fullKeyboardLayout } from '../constants' -interface NormalKeyboardProps { +interface FullKeyboardProps { onChange: (input: string) => void keyboardRef: React.MutableRefObject } -// Note the design team request is the following -// Input type: characters, numbers and special characters - -const customLayout = { - default: [ - 'q w e r t y u i o p', - '{numbers} a s d f g h j k l', - '{shift} z x c v b n m {backspace}', - '{space}', - ], - shift: [ - 'Q W E R T Y U I O P', - '{numbers} A S D F G H J K L', - '{abc} Z X C V B N M {backspace}', - '{space}', - ], - symbols: [ - '[ ] { } # % ^ * + =', - '_ \\ | ~ < > € £ ¥ ·', - "{abc} {numbers} . , ? ! ' {backspace}", - '{space}', - ], - numbers: [ - '1 2 3 4 5 6 7 8 9 0', - '- / : ; ( ) $ & @ "', - "{abc} {symbols} . , ? ! ' {backspace}", - '{space}', - ], -} - -export function NormalKeyboard({ +export function FullKeyboard({ onChange, keyboardRef, -}: NormalKeyboardProps): JSX.Element { +}: FullKeyboardProps): JSX.Element { const [layoutName, setLayoutName] = React.useState('default') const handleShift = (button: string): void => { switch (button) { @@ -78,7 +48,7 @@ export function NormalKeyboard({ onChange={onChange} onKeyPress={onKeyPress} layoutName={layoutName} - layout={customLayout} + layout={fullKeyboardLayout} display={customDisplay} mergeDisplay={true} autoUseTouchEvents={true} diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx index c62faec02dd..34558f5ef34 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/IndividualKey.stories.tsx @@ -17,11 +17,6 @@ export default { title: 'ODD/Atoms/SoftwareKeyboard/IndividualKey', component: IndividualKey, parameters: touchScreenViewport, - argTypes: { - keyText: { - defaultValue: 'hello otie!', - }, - }, } as Meta const Template: Story> = args => { @@ -56,5 +51,5 @@ const Template: Story> = args => { export const Keyboard = Template.bind({}) Keyboard.args = { - keyText: 'hello otie!', + keyText: 'hello!', } diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx index ee251ea5ac9..c501b0eccc6 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx @@ -34,6 +34,7 @@ export function IndividualKey({ autoUseTouchEvents={true} useButtonTag={true} {...numericalKeyboard} + width="100%" /> ) } diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index d055acc2ae2..55ca72737d7 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -1,6 +1,6 @@ export const customDisplay = { '{numbers}': '123', - '{shift}': 'SHIFT', + '{shift}': 'ABC', '{space}': 'space', '{backspace}': 'del', '{abc}': 'abc', @@ -9,7 +9,7 @@ export const customDisplay = { } // keyboard layout for Alphanumeric Keyboard -export const alphanumericLayout = { +export const alphanumericKeyboardLayout = { default: [ 'q w e r t y u i o p', '{numbers} a s d f g h j k l', @@ -22,3 +22,31 @@ export const alphanumericLayout = { ], numbers: ['1 2 3', '4 5 6', '7 8 9', '{abc} 0 {backspace}'], } + +// keyboard layout for Full Keyboard +export const fullKeyboardLayout = { + default: [ + 'q w e r t y u i o p', + '{numbers} a s d f g h j k l', + '{shift} z x c v b n m {backspace}', + '{space}', + ], + shift: [ + 'Q W E R T Y U I O P', + '{numbers} A S D F G H J K L', + '{abc} Z X C V B N M {backspace}', + '{space}', + ], + symbols: [ + '[ ] { } # % ^ +', + '{abc} _ \\ | < > · =', + "{numbers} . , ? ! ' * ~ {backspace}", + '{space}', + ], + numbers: [ + '1 2 3 4 5 6 7 8 9 0', + '{abc} - / : ; ( ) $ & @ "', + "{symbols} . , ? ! ' * ~ {backspace}", + '{space}', + ], +} diff --git a/app/src/atoms/SoftwareKeyboard/index.ts b/app/src/atoms/SoftwareKeyboard/index.ts index 3f7d5f8a7ea..81dc2e2b4fb 100644 --- a/app/src/atoms/SoftwareKeyboard/index.ts +++ b/app/src/atoms/SoftwareKeyboard/index.ts @@ -1,4 +1,4 @@ export { AlphanumericKeyboard } from './AlphanumericKeyboard' export { IndividualKey } from './IndividualKey' -export { NormalKeyboard } from './NormalKeyboard' +export { FullKeyboard } from './FullKeyboard' export { NumericalKeyboard } from './NumericalKeyboard' From fd56c6265ba83275266ad3050913edfcc95dba69 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 21 Mar 2024 17:16:48 -0400 Subject: [PATCH 07/19] update full keyboard test --- ...eyboard.test.tsx => FullKeyboard.test.tsx} | 33 +++++++++---------- 1 file changed, 16 insertions(+), 17 deletions(-) rename app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/{NormalKeyboard.test.tsx => FullKeyboard.test.tsx} (88%) diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/NormalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx similarity index 88% rename from app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/NormalKeyboard.test.tsx rename to app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx index cc53e3ff827..614e58d9974 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/NormalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx @@ -3,14 +3,14 @@ import { describe, it, expect, vi } from 'vitest' import '@testing-library/jest-dom/vitest' import { fireEvent, renderHook, screen } from '@testing-library/react' import { renderWithProviders } from '../../../../__testing-utils__' -import { NormalKeyboard } from '..' +import { FullKeyboard } from '..' -const render = (props: React.ComponentProps) => { - return renderWithProviders()[0] +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] } -describe('SoftwareKeyboard', () => { - it('should render the software keyboards', () => { +describe('FullKeyboard', () => { + it('should render FullKeyboard keyboard', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), @@ -40,7 +40,7 @@ describe('SoftwareKeyboard', () => { 'j', 'k', 'l', - 'SHIFT', + 'ABC', 'z', 'x', 'c', @@ -58,14 +58,14 @@ describe('SoftwareKeyboard', () => { }) }) - it('should render the software keyboards when hitting shift key', () => { + it('should render full keyboard when hitting ABC key', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, } render(props) - const shiftKey = screen.getByRole('button', { name: 'SHIFT' }) + const shiftKey = screen.getByRole('button', { name: 'ABC' }) fireEvent.click(shiftKey) const buttons = screen.getAllByRole('button') const expectedButtonNames = [ @@ -107,7 +107,7 @@ describe('SoftwareKeyboard', () => { }) }) - it('should render the software keyboards when hitting 123 key', () => { + it('should render full keyboard when hitting 123 key', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), @@ -128,6 +128,7 @@ describe('SoftwareKeyboard', () => { '8', '9', '0', + 'abc', '-', '/', ':', @@ -138,13 +139,14 @@ describe('SoftwareKeyboard', () => { '&', '@', '"', - 'abc', '#+=', '.', ',', '?', '!', "'", + '*', + '~', 'del', 'space', ] @@ -175,26 +177,23 @@ describe('SoftwareKeyboard', () => { '#', '%', '^', - '*', '+', - '=', + 'abc', '_', '\\', '|', - '~', '<', '>', - '€', - '£', - '¥', '·', - 'abc', + '=', '123', '.', ',', '?', '!', "'", + '*', + '~', 'del', 'space', ] From f6fbc8cbb737e4175703ac97b2d615af5ca06030 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 21 Mar 2024 17:21:55 -0400 Subject: [PATCH 08/19] replace normal keyboard with full keyboard to fix check-js errors --- app/src/index.tsx | 8 ++++---- app/src/organisms/NetworkSettings/SetWifiCred.tsx | 4 ++-- app/src/organisms/NetworkSettings/SetWifiSsid.tsx | 4 ++-- app/src/styles.global.module.css | 7 ++++--- 4 files changed, 12 insertions(+), 11 deletions(-) diff --git a/app/src/index.tsx b/app/src/index.tsx index 123cfcc26fd..f6f4918d769 100644 --- a/app/src/index.tsx +++ b/app/src/index.tsx @@ -15,10 +15,10 @@ import { uiInitialized } from './redux/shell' import { history } from './redux/reducer' import { store } from './redux/store' -import '../src/atoms/SoftwareKeyboard/index.css' -import '../src/atoms/SoftwareKeyboard/CustomKeyboard/index.css' -import '../src/atoms/SoftwareKeyboard/NormalKeyboard/index.css' -import '../src/atoms/SoftwareKeyboard/Numpad/index.css' +import '../src/atoms/SoftwareKeyboard/AlphanumericKeyboard' +import '../src/atoms/SoftwareKeyboard/FullKeyboard/index.css' +import '../src/atoms/SoftwareKeyboard/IndividualKey/index.css' +import '../src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css' // component tree import { App } from './App' diff --git a/app/src/organisms/NetworkSettings/SetWifiCred.tsx b/app/src/organisms/NetworkSettings/SetWifiCred.tsx index 6c64ceed9bf..c770dd07136 100644 --- a/app/src/organisms/NetworkSettings/SetWifiCred.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiCred.tsx @@ -17,7 +17,7 @@ import { import { StyledText } from '../../atoms/text' import { InputField } from '../../atoms/InputField' -import { NormalKeyboard } from '../../atoms/SoftwareKeyboard' +import { FullKeyboard } from '../../atoms/SoftwareKeyboard' import { useIsUnboxingFlowOngoing } from '../RobotSettingsDashboard/NetworkSettings/hooks' interface SetWifiCredProps { @@ -78,7 +78,7 @@ export function SetWifiCred({ - e != null && setPassword(String(e))} keyboardRef={keyboardRef} /> diff --git a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx index f954cb9c7f2..29658833018 100644 --- a/app/src/organisms/NetworkSettings/SetWifiSsid.tsx +++ b/app/src/organisms/NetworkSettings/SetWifiSsid.tsx @@ -12,7 +12,7 @@ import { import { StyledText } from '../../atoms/text' import { InputField } from '../../atoms/InputField' -import { NormalKeyboard } from '../../atoms/SoftwareKeyboard' +import { FullKeyboard } from '../../atoms/SoftwareKeyboard' import { useIsUnboxingFlowOngoing } from '../RobotSettingsDashboard/NetworkSettings/hooks' interface SetWifiSsidProps { @@ -57,7 +57,7 @@ export function SetWifiSsid({ /> - { e != null && setInputSsid(e) }} diff --git a/app/src/styles.global.module.css b/app/src/styles.global.module.css index 9cdcb703387..2247749b91b 100644 --- a/app/src/styles.global.module.css +++ b/app/src/styles.global.module.css @@ -3,6 +3,7 @@ */ @import '../../node_modules/react-simple-keyboard/build/css/index.css'; -@import './atoms/SoftwareKeyboard/CustomKeyboard/index.css'; -@import './atoms/SoftwareKeyboard/NormalKeyboard/index.css'; -@import './atoms/SoftwareKeyboard/Numpad/index.css'; +@import './atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css'; +@import './atoms/SoftwareKeyboard/FullKeyboard/index.css'; +@import './atoms/SoftwareKeyboard/NumericalKeyboard/index.css'; +@import './atoms/SoftwareKeyboard/IndividualKey/index.css'; From aa95ae0d8d1214d83e7faebcd0adaec2941f77c8 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 21 Mar 2024 17:24:51 -0400 Subject: [PATCH 09/19] add disable to individual css --- app/src/atoms/SoftwareKeyboard/IndividualKey/index.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css index 872f61bbee8..d6596264885 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css @@ -1,3 +1,5 @@ +/* stylelint-disable */ + .individual-key button.hg-button.hg-button-backspace span, .individual-key button.hg-button.hg-button-abc span, .individual-key button.hg-button.hg-standardBtn span { From 25acb56d54709a52c54ae4a6aa4bc9f00d026bb0 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 22 Mar 2024 15:19:28 -0400 Subject: [PATCH 10/19] update the keylayout --- .../FullKeyboard/__tests__/FullKeyboard.test.tsx | 8 ++++---- app/src/atoms/SoftwareKeyboard/constants.ts | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx index 614e58d9974..f2764f75119 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx @@ -128,7 +128,7 @@ describe('FullKeyboard', () => { '8', '9', '0', - 'abc', + '#+=', '-', '/', ':', @@ -139,7 +139,7 @@ describe('FullKeyboard', () => { '&', '@', '"', - '#+=', + 'abc', '.', ',', '?', @@ -178,7 +178,7 @@ describe('FullKeyboard', () => { '%', '^', '+', - 'abc', + '123', '_', '\\', '|', @@ -186,7 +186,7 @@ describe('FullKeyboard', () => { '>', '·', '=', - '123', + 'abc', '.', ',', '?', diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index 55ca72737d7..c5034f01c7e 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -39,14 +39,14 @@ export const fullKeyboardLayout = { ], symbols: [ '[ ] { } # % ^ +', - '{abc} _ \\ | < > · =', - "{numbers} . , ? ! ' * ~ {backspace}", + '{numbers} _ \\ | < > · =', + "{abc} . , ? ! ' * ~ {backspace}", '{space}', ], numbers: [ '1 2 3 4 5 6 7 8 9 0', - '{abc} - / : ; ( ) $ & @ "', - "{symbols} . , ? ! ' * ~ {backspace}", + '{symbols} - / : ; ( ) $ & @ "', + "{abc} . , ? ! ' * ~ {backspace}", '{space}', ], } From 27abefcd6e4312eeeec1cdabfdf8777c68d77650 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 22 Mar 2024 15:44:00 -0400 Subject: [PATCH 11/19] fix test error in set up wifi --- .../organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx index 6532203b4cb..0af38eff22d 100644 --- a/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx +++ b/app/src/organisms/NetworkSettings/__tests__/SetWifiCred.test.tsx @@ -43,7 +43,7 @@ describe('SetWifiCred', () => { // software keyboard screen.getByRole('button', { name: 'del' }) screen.getByRole('button', { name: 'a' }) - screen.getByRole('button', { name: 'SHIFT' }) + screen.getByRole('button', { name: 'ABC' }) }) it('should display password', () => { From 58a6d85fe28730f543a86c9ef20aed0238e07e93 Mon Sep 17 00:00:00 2001 From: koji Date: Fri, 22 Mar 2024 17:36:38 -0400 Subject: [PATCH 12/19] modify spacing in Storybook --- .../AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx | 2 +- app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx | 1 + .../SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx index fa47977ccfe..15de229352e 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/AlphanumericKeyboard.stories.tsx @@ -35,7 +35,7 @@ const Template: Story< onFocus={() => setShowKeyboard(true)} /> - + {showKeyboard && ( e != null && setValue(String(e))} diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx index 335b8b5be2f..af02f09b31f 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx @@ -45,6 +45,7 @@ export function AlphanumericKeyboard({ mergeDisplay={true} autoUseTouchEvents={true} useButtonTag={true} + width="100%" /> ) } diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx index d7957d6b00a..8c2be4cda3a 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/FullKeyboard.stories.tsx @@ -34,7 +34,7 @@ const Template: Story> = args => { onFocus={() => setShowKeyboard(true)} /> - + {showKeyboard && ( e != null && setValue(String(e))} From bba6cc3fd5aef4b9599890b84b2232728f548f2e Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 25 Mar 2024 16:36:09 -0400 Subject: [PATCH 13/19] update alphabetical keyboard style --- .../AlphanumericKeyboard/index.css | 56 +++++++++++++------ 1 file changed, 39 insertions(+), 17 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css index f3e0b6cdd54..f95c994f982 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css @@ -1,33 +1,55 @@ /* stylelint-disable */ -.simple-keyboard.oddTheme1.hg-theme-default { +.simple-keyboard.oddTheme1.hg-theme-default .hg-layout-default { width: 100%; height: 100%; background-color: #cbcccc; /* grey35 */ font-family: 'Public Sans', sans-serif; padding: 8px; - font-size: 28px; } -.simple-keyboard.oddTheme1 - .hg-row:not(:last-child) - .hg-button:not(:last-child) { - margin-right: 8px; - margin-bottom: 3px; +.hg-layout-default .hg-row .hg-button, +.hg-layout-shift .hg-row .hg-button, +.hg-layout-numbers .hg-row .hg-button { + color: #16212d; + height: 100%; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; + background-color: #ffffff; + padding: 10px 22px; } -.simple-keyboard.simple-keyboard.oddTheme1 .hg-button { - height: 48px; +/* first row and second row */ +.hg-layout-default .hg-row:not(:last-child), +.hg-layout-shift .hg-row:not(:last-child) { + grid-column: 8px; +} +.hg-row:not(:last-child) .hg-button { + width: 94px; } -.simple-keyboard .hg-button:active { - color: #16212d; - background-color: #e3e3e3; +/* third row first button and last button are the same size +the rest is the same */ +.hg-layout-default .hg-row:last-child, +.hg-layout-shift .hg-row:last-child, +.hg-layout-numbers .hg-row:last-child { + /* adding 3px because package's css add margin-right:5px */ + grid-gap: 3px; +} +.hg-layout-default .hg-row:last-child .hg-button, +.hg-layout-shift .hg-row:last-child .hg-button { + width: 98px; + /* margin: 0 !important; */ +} +.hg-layout-default .hg-row:last-child .hg-button:first-child, +.hg-layout-default .hg-row:last-child .hg-button:last-child, +.hg-layout-shift .hg-row:last-child .hg-button:first-child, +.hg-layout-shift .hg-row:last-child .hg-button:last-child { + width: 132px; } -/* Numeric keyboard in custom keyboard */ -.hg-layout-numbers button.hg-button.hg-button-backspace, -.hg-layout-numbers button.hg-button.hg-button-abc, -.hg-layout-numbers button.hg-button.hg-standardBtn { - flex: 1; +.hg-layout-numbers .hg-row .hg-button { + width: 330px; } From 153bf5500be09709be038f9daa9ef3720147f275 Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 25 Mar 2024 18:49:24 -0400 Subject: [PATCH 14/19] update keyboar style --- .../AlphanumericKeyboard/index.css | 24 ++++- .../SoftwareKeyboard/FullKeyboard/index.css | 100 ++++++++++++++++-- .../SoftwareKeyboard/IndividualKey/index.css | 5 + .../NumericalKeyboard/index.css | 5 + app/src/atoms/SoftwareKeyboard/constants.ts | 10 +- 5 files changed, 127 insertions(+), 17 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css index f95c994f982..8816853e595 100644 --- a/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.css @@ -1,5 +1,12 @@ /* stylelint-disable */ +/* Alphanumeric Keyboard has 3 layouts + 1. lower letter keys: hg-layout-default + 2. upper letter keys: hg-layout-shift + 3. number keys: hg-layout-numbers + 1, 2 are using the same style but 3 has own style. + */ + .simple-keyboard.oddTheme1.hg-theme-default .hg-layout-default { width: 100%; height: 100%; @@ -12,7 +19,6 @@ .hg-layout-shift .hg-row .hg-button, .hg-layout-numbers .hg-row .hg-button { color: #16212d; - height: 100%; font-size: 20px; font-style: normal; font-weight: 600; @@ -21,6 +27,16 @@ padding: 10px 22px; } +.simple-keyboard .hg-button:active { + color: #16212d; + background-color: #dedede; /* grey30 */ +} + +.hg-layout-default .hg-row .hg-button, +.hg-layout-shift .hg-row .hg-button { + height: 62.3px; +} + /* first row and second row */ .hg-layout-default .hg-row:not(:last-child), .hg-layout-shift .hg-row:not(:last-child) { @@ -40,8 +56,7 @@ the rest is the same */ } .hg-layout-default .hg-row:last-child .hg-button, .hg-layout-shift .hg-row:last-child .hg-button { - width: 98px; - /* margin: 0 !important; */ + width: 97px; } .hg-layout-default .hg-row:last-child .hg-button:first-child, .hg-layout-default .hg-row:last-child .hg-button:last-child, @@ -51,5 +66,6 @@ the rest is the same */ } .hg-layout-numbers .hg-row .hg-button { - width: 330px; + height: 44.75px; + width: 330px !important; } diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css index 5e1b269ca82..b54cde35e04 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/index.css @@ -1,26 +1,110 @@ /* stylelint-disable */ +/* Full Keyboard has 4 layouts + 1. lower letter keys: hg-layout-default + 2. upper letter keys: hg-layout-shift + 3. number keys: hg-layout-numbers + 4. symbol keys: hg-layout-symbols + 1, 2 are using the same style but 3 & 4 have their own styles. + */ + .simple-keyboard.oddTheme1.hg-theme-default { width: 100%; height: 100%; background-color: #cbcccc; /* grey35 */ font-family: 'Public Sans', sans-serif; padding: 8px; - font-size: 28px; } -.simple-keyboard.oddTheme1 - .hg-row:not(:last-child) - .hg-button:not(:last-child) { - margin-right: 8px; - margin-bottom: 3px; +.hg-layout-default .hg-row, +.hg-layout-shift .hg-row, +.hg-layout-symbols .hg-row, +.hg-layout-numbers .hg-row { + /* adding 3px because package's css add margin-right:5px */ + grid-gap: 3px; } .simple-keyboard.simple-keyboard.oddTheme1 .hg-button { - height: 48px; + height: 44.75px; +} + +.simple-keyboard.simple-keyboard.oddTheme1 .hg-button:not(:last-child) { + margin-bottom: 3px; +} + +.simple-keyboard .hg-button:active { + color: #16212d; + background-color: #dedede; +} + +.hg-layout-default .hg-row .hg-button, +.hg-layout-shift .hg-row .hg-button, +.hg-layout-symbols .hg-row .hg-button, +.hg-layout-numbers .hg-row .hg-button { + color: #16212d; + height: 44.75px; + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: 24px; + background-color: #ffffff; + padding: 10px 22px; +} + +.hg-layout-default .hg-row:nth-child(1) .hg-button, +.hg-layout-default .hg-row:nth-child(2) .hg-button, +.hg-layout-shift .hg-row:nth-child(1) .hg-button, +.hg-layout-shift .hg-row:nth-child(2) .hg-button, +.hg-layout-numbers .hg-row:nth-child(1) .hg-button { + width: 93.6px; +} + +.hg-layout-numbers .hg-row:nth-child(2) .hg-button { + width: 83.4px; +} + +.hg-layout-symbols .hg-row:nth-child(2) .hg-button { + width: 122.5px; +} + +.hg-layout-numbers .hg-row:nth-child(2) .hg-button:nth-child(10) { + /* This is needed to override the package style */ + max-width: 83.4px !important; +} + +.hg-layout-numbers .hg-row:nth-child(2) .hg-button:first-child, +.hg-layout-symbols .hg-row:nth-child(2) .hg-button:first-child { + width: 94px; +} + +.hg-layout-default .hg-row:nth-child(3) .hg-button, +.hg-layout-shift .hg-row:nth-child(3) .hg-button, +.hg-layout-numbers .hg-row:nth-child(3) .hg-button, +.hg-layout-symbols .hg-row:nth-child(3) .hg-button { + width: 97px; +} + +/* .hg-layout-default .hg-row:nth-child(3) .hg-button, +.hg-layout-shift .hg-row:nth-child(3) .hg-button { + width: 97px; +} */ + +.hg-layout-default .hg-row:nth-child(3) .hg-button:first-child, +.hg-layout-default .hg-row:nth-child(3) .hg-button:last-child, +.hg-layout-shift .hg-row:nth-child(3) .hg-button:first-child, +.hg-layout-shift .hg-row:nth-child(3) .hg-button:last-child, +.hg-layout-numbers .hg-row:nth-child(3) .hg-button:first-child, +.hg-layout-numbers .hg-row:nth-child(3) .hg-button:last-child, +.hg-layout-symbols .hg-row:nth-child(3) .hg-button:first-child, +.hg-layout-symbols .hg-row:nth-child(3) .hg-button:last-child { + width: 132px; +} + +.hg-layout-symbols .hg-row:nth-child(1) .hg-button { + width: 137.1px; } .simple-keyboard .hg-button:active { color: #16212d; - background-color: #e3e3e3; + background-color: #e3e3e3; /* grey30 */ } diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css index d6596264885..8f731e8f3f6 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css @@ -8,3 +8,8 @@ font-weight: 600; line-height: 24px; } + +.simple-keyboard .hg-button:active { + color: #16212d; + background-color: #dedede; /* grey30 */ +} diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css index 40c458802d3..2e05d9163b9 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css @@ -25,3 +25,8 @@ div:nth-child(4) .hg-button.hg-standardBtn:nth-child(1) { background-color: #fff; cursor: pointer; } + +.simple-keyboard .hg-button:active { + color: #16212d; + background-color: #dedede; /* grey30 */ +} diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index c5034f01c7e..6d9eefa40da 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -38,15 +38,15 @@ export const fullKeyboardLayout = { '{space}', ], symbols: [ - '[ ] { } # % ^ +', - '{numbers} _ \\ | < > · =', - "{abc} . , ? ! ' * ~ {backspace}", + '[ ] { } % ^ +', + '{abc} _ \\ | < > # =', + "{numbers} . , ? ! ' * ~ {backspace}", '{space}', ], numbers: [ '1 2 3 4 5 6 7 8 9 0', - '{symbols} - / : ; ( ) $ & @ "', - "{abc} . , ? ! ' * ~ {backspace}", + '{abc} - / : ; ( ) $ & @ "', + "{symbols} . , ? ! ' * ~ {backspace}", '{space}', ], } From 6d08c93a9244a045db1fdec1d2058a9049b0b999 Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 25 Mar 2024 18:57:50 -0400 Subject: [PATCH 15/19] Update index.css --- app/src/atoms/SoftwareKeyboard/IndividualKey/index.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css index 8f731e8f3f6..cfd00f3a2af 100644 --- a/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css +++ b/app/src/atoms/SoftwareKeyboard/IndividualKey/index.css @@ -1,14 +1,11 @@ /* stylelint-disable */ -.individual-key button.hg-button.hg-button-backspace span, -.individual-key button.hg-button.hg-button-abc span, -.individual-key button.hg-button.hg-standardBtn span { +.simple-keyboard .hg-button { text-align: center; font-size: 20px; font-weight: 600; line-height: 24px; } - .simple-keyboard .hg-button:active { color: #16212d; background-color: #dedede; /* grey30 */ From 2551b46659713d27aee6385a85ba882939fea25e Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 25 Mar 2024 19:05:50 -0400 Subject: [PATCH 16/19] fix test of full keyboard --- .../FullKeyboard/__tests__/FullKeyboard.test.tsx | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx index f2764f75119..c84a33a2796 100644 --- a/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/FullKeyboard/__tests__/FullKeyboard.test.tsx @@ -128,7 +128,7 @@ describe('FullKeyboard', () => { '8', '9', '0', - '#+=', + 'abc', '-', '/', ':', @@ -139,7 +139,7 @@ describe('FullKeyboard', () => { '&', '@', '"', - 'abc', + '#+=', '.', ',', '?', @@ -174,19 +174,18 @@ describe('FullKeyboard', () => { ']', '{', '}', - '#', '%', '^', '+', - '123', + 'abc', '_', '\\', '|', '<', '>', - '·', + '#', '=', - 'abc', + '123', '.', ',', '?', From 9a9c1bc48dde421b5480438b1a47ca9fc36a20f1 Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 26 Mar 2024 23:14:15 -0400 Subject: [PATCH 17/19] update numerical keybaord layout and style --- .../NumericalKeyboard.stories.tsx | 16 ++++++- .../NumericalKeyboard/index.css | 48 +++++++++++++------ .../NumericalKeyboard/index.tsx | 31 +++++------- app/src/atoms/SoftwareKeyboard/constants.ts | 19 ++++++++ 4 files changed, 79 insertions(+), 35 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx index 1ad614bbae6..721744a235e 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx @@ -25,6 +25,13 @@ export default { }, defaultValue: false, }, + allowNegative: { + control: { + type: 'boolean', + options: [true, false], + }, + defaultValue: false, + }, }, } as Meta @@ -46,13 +53,19 @@ const Template: Story< }} /> - + {showKeyboard && ( e != null && setValue(String(e))} keyboardRef={keyboardRef} isDecimal={args.isDecimal} + allowNegative={args.allowNegative} /> )} @@ -63,4 +76,5 @@ const Template: Story< export const Keyboard = Template.bind({}) Keyboard.args = { isDecimal: false, + allowNegative: false, } diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css index 2e05d9163b9..239f86ba664 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.css @@ -1,29 +1,49 @@ /* stylelint-disable */ -.numerical-keyboard button.hg-button.hg-button-backspace, -.numerical-keyboard button.hg-button.hg-button-abc, -.numerical-keyboard button.hg-button.hg-standardBtn { - flex: 1; +/* Numerical Keyboard has 4 layouts + 1. int not allowed negative: intKeyboard + 2. int allowed negative: intNegKeyboard + 3. float not allowed negative: floatKeyboard + 4. float not allowed negative: floatNegKeyboard + */ + +.simple-keyboard.oddTheme1.hg-theme-default { + width: 100%; + height: 100%; + background-color: #cbcccc; /* grey35 */ + font-family: 'Public Sans', sans-serif; + padding: 8px; } -.numerical-keyboard button.hg-button.hg-button-backspace span, -.numerical-keyboard button.hg-button.hg-button-abc span, -.numerical-keyboard button.hg-button.hg-standardBtn span { +.hg-layout-intKeyboard .hg-row, +.hg-layout-intNegKeyboard .hg-row, +.hg-layout-floatKeyboard .hg-row, +.hg-layout-floatNegKeyboard .hg-row { + grid-gap: 3px; +} +.numerical-keyboard .hg-row .hg-button { text-align: center; font-size: 20px; font-weight: 600; line-height: 24px; + height: 75px; + padding: 10px 22px; +} + +.hg-layout-intKeyboard .hg-row:nth-child(-n + 3) .hg-button, +.hg-layout-intNegKeyboard .hg-row:nth-child(-n + 4) .hg-button, +.hg-layout-floatKeyboard .hg-row:nth-child(-n + 4) .hg-button, +.hg-layout-floatNegKeyboard .hg-row:nth-child(-n + 3) .hg-button { + width: 109.3px; + margin-bottom: 3px; } -div:nth-child(4) .hg-button.hg-standardBtn:nth-child(1) { - background-color: transparent; - box-shadow: none; - cursor: none; +.hg-layout-intKeyboard .hg-row:nth-child(4) .hg-button { + width: 168px; } -.numerical-keyboard button.hg-button.hg-standardBtn.hg-decimal-point { - background-color: #fff; - cursor: pointer; +.hg-layout-floatNegKeyboard .hg-row:nth-child(4) .hg-button { + width: 80px; } .simple-keyboard .hg-button:active { diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx index 3808a65c169..5301a9e0144 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx @@ -1,28 +1,25 @@ import * as React from 'react' import Keyboard from 'react-simple-keyboard' +import { numericalKeyboardLayout, numericalCustom } from '../constants' -const customDisplay = { - '{backspace}': 'del', -} interface NumericalKeyboardProps { onChange: (input: string) => void keyboardRef: React.MutableRefObject isDecimal?: boolean + allowNegative?: boolean } -const decimalOffKeyboard = ['1 2 3', '4 5 6', '7 8 9', ' 0 {backspace}'] -const decimalOnKeyboard = ['1 2 3', '4 5 6', '7 8 9', '. 0 {backspace}'] - +// the default keyboard layout intKeyboard that doesn't have decimal point and hyphen. export function NumericalKeyboard({ onChange, keyboardRef, isDecimal = false, + allowNegative = false, }: NumericalKeyboardProps): JSX.Element { - const numericalKeyboard = { - layout: { - default: isDecimal ? decimalOnKeyboard : decimalOffKeyboard, - }, - } + const layoutName = `${isDecimal ? 'float' : 'int'}${ + allowNegative ? 'NegKeyboard' : 'Keyboard' + }` + return ( /* * autoUseTouchEvents: for Flex on-device app @@ -32,17 +29,11 @@ export function NumericalKeyboard({ keyboardRef={r => (keyboardRef.current = r)} theme={'hg-theme-default oddTheme1 numerical-keyboard'} onChange={onChange} - layoutName="default" - buttonTheme={[ - { - class: 'hg-decimal-point', - buttons: '.', - }, - ]} - display={customDisplay} + display={numericalCustom} autoUseTouchEvents={true} useButtonTag={true} - {...numericalKeyboard} + layoutName={layoutName} + layout={numericalKeyboardLayout} /> ) } diff --git a/app/src/atoms/SoftwareKeyboard/constants.ts b/app/src/atoms/SoftwareKeyboard/constants.ts index 6d9eefa40da..1808f4bd2f3 100644 --- a/app/src/atoms/SoftwareKeyboard/constants.ts +++ b/app/src/atoms/SoftwareKeyboard/constants.ts @@ -50,3 +50,22 @@ export const fullKeyboardLayout = { '{space}', ], } + +// Numerical keyboard layout +export const numericalKeyboardLayout = { + // int without negative value + intKeyboard: ['1 2 3', '4 5 6', '7 8 9', '0 {backspace}'], + + // int with negative value + intNegKeyboard: ['1 2 3', '4 5 6', '7 8 9', '0 - {backspace}'], + + // float without negative value, + floatKeyboard: ['1 2 3', '4 5 6', '7 8 9', '0 . {backspace}'], + + // float with negative value + floatNegKeyboard: ['1 2 3', '4 5 6', '7 8 9', '0 . - {backspace}'], +} + +export const numericalCustom = { + '{backspace}': 'del', +} From 35770e418f84d8f76e13ff23ab6e860167aac03c Mon Sep 17 00:00:00 2001 From: koji Date: Tue, 26 Mar 2024 23:23:48 -0400 Subject: [PATCH 18/19] fix test cases for numerical keyboard --- .../__tests__/NumericalKeyboard.test.tsx | 86 ++++++++++++++++++- 1 file changed, 83 insertions(+), 3 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx index bdcf7cd60f7..eebb14cf22d 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx @@ -10,12 +10,13 @@ const render = (props: React.ComponentProps) => { } describe('NumericalKeyboard', () => { - it('should render the numpad keys decimal off', () => { + it('should render numerical keyboard isDecimal: false and allowNegative: false', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: false, + allowNegative: false, } render(props) const buttons = screen.getAllByRole('button') @@ -29,7 +30,6 @@ describe('NumericalKeyboard', () => { '7', '8', '9', - '', '0', 'del', ] @@ -40,12 +40,44 @@ describe('NumericalKeyboard', () => { }) }) - it('should render the numpad keys decimal on', () => { + it('should render numerical keyboard isDecimal: false and allowNegative: true', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: false, + allowNegative: true, + } + render(props) + const buttons = screen.getAllByRole('button') + const expectedButtonNames = [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', + '0', + '-', + 'del', + ] + + buttons.forEach((button, index) => { + const expectedName = expectedButtonNames[index] + expect(button).toHaveTextContent(expectedName) + }) + }) + + it('should render numerical keyboard isDecimal: true and allowNegative: false', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, + allowNegative: false, } render(props) const buttons = screen.getAllByRole('button') @@ -59,8 +91,40 @@ describe('NumericalKeyboard', () => { '7', '8', '9', + '0', '.', + 'del', + ] + + buttons.forEach((button, index) => { + const expectedName = expectedButtonNames[index] + expect(button).toHaveTextContent(expectedName) + }) + }) + + it('should render numerical keyboard isDecimal: true and allowNegative: true', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: true, + allowNegative: true, + } + render(props) + const buttons = screen.getAllByRole('button') + const expectedButtonNames = [ + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', '0', + '.', + '-', 'del', ] @@ -76,6 +140,7 @@ describe('NumericalKeyboard', () => { onChange: vi.fn(), keyboardRef: result.current, isDecimal: false, + allowNegative: false, } render(props) const numKey = screen.getByRole('button', { name: '1' }) @@ -89,10 +154,25 @@ describe('NumericalKeyboard', () => { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, + allowNegative: false, } render(props) const numKey = screen.getByRole('button', { name: '.' }) fireEvent.click(numKey) expect(props.onChange).toHaveBeenCalled() }) + + it('should call mock function when clicking hyphen key', () => { + const { result } = renderHook(() => React.useRef(null)) + const props = { + onChange: vi.fn(), + keyboardRef: result.current, + isDecimal: true, + allowNegative: true, + } + render(props) + const numKey = screen.getByRole('button', { name: '-' }) + fireEvent.click(numKey) + expect(props.onChange).toHaveBeenCalled() + }) }) From 66f58eabff000fa88b1035b17bbba61c03759309 Mon Sep 17 00:00:00 2001 From: koji Date: Thu, 28 Mar 2024 11:24:14 -0400 Subject: [PATCH 19/19] change one prop name --- .../NumericalKeyboard.stories.tsx | 6 ++--- .../__tests__/NumericalKeyboard.test.tsx | 22 +++++++++---------- .../NumericalKeyboard/index.tsx | 6 ++--- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx index 721744a235e..710750697ff 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/NumericalKeyboard.stories.tsx @@ -25,7 +25,7 @@ export default { }, defaultValue: false, }, - allowNegative: { + hasHyphen: { control: { type: 'boolean', options: [true, false], @@ -65,7 +65,7 @@ const Template: Story< onChange={e => e != null && setValue(String(e))} keyboardRef={keyboardRef} isDecimal={args.isDecimal} - allowNegative={args.allowNegative} + hasHyphen={args.hasHyphen} /> )} @@ -76,5 +76,5 @@ const Template: Story< export const Keyboard = Template.bind({}) Keyboard.args = { isDecimal: false, - allowNegative: false, + hasHyphen: false, } diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx index eebb14cf22d..0b3143554fa 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/__tests__/NumericalKeyboard.test.tsx @@ -10,13 +10,13 @@ const render = (props: React.ComponentProps) => { } describe('NumericalKeyboard', () => { - it('should render numerical keyboard isDecimal: false and allowNegative: false', () => { + it('should render numerical keyboard isDecimal: false and hasHyphen: false', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: false, - allowNegative: false, + hasHyphen: false, } render(props) const buttons = screen.getAllByRole('button') @@ -40,13 +40,13 @@ describe('NumericalKeyboard', () => { }) }) - it('should render numerical keyboard isDecimal: false and allowNegative: true', () => { + it('should render numerical keyboard isDecimal: false and hasHyphen: true', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: false, - allowNegative: true, + hasHyphen: true, } render(props) const buttons = screen.getAllByRole('button') @@ -71,13 +71,13 @@ describe('NumericalKeyboard', () => { }) }) - it('should render numerical keyboard isDecimal: true and allowNegative: false', () => { + it('should render numerical keyboard isDecimal: true and hasHyphen: false', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, - allowNegative: false, + hasHyphen: false, } render(props) const buttons = screen.getAllByRole('button') @@ -102,13 +102,13 @@ describe('NumericalKeyboard', () => { }) }) - it('should render numerical keyboard isDecimal: true and allowNegative: true', () => { + it('should render numerical keyboard isDecimal: true and hasHyphen: true', () => { const { result } = renderHook(() => React.useRef(null)) const props = { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, - allowNegative: true, + hasHyphen: true, } render(props) const buttons = screen.getAllByRole('button') @@ -140,7 +140,7 @@ describe('NumericalKeyboard', () => { onChange: vi.fn(), keyboardRef: result.current, isDecimal: false, - allowNegative: false, + hasHyphen: false, } render(props) const numKey = screen.getByRole('button', { name: '1' }) @@ -154,7 +154,7 @@ describe('NumericalKeyboard', () => { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, - allowNegative: false, + hasHyphen: false, } render(props) const numKey = screen.getByRole('button', { name: '.' }) @@ -168,7 +168,7 @@ describe('NumericalKeyboard', () => { onChange: vi.fn(), keyboardRef: result.current, isDecimal: true, - allowNegative: true, + hasHyphen: true, } render(props) const numKey = screen.getByRole('button', { name: '-' }) diff --git a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx index 5301a9e0144..85d1a0b8b43 100644 --- a/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx +++ b/app/src/atoms/SoftwareKeyboard/NumericalKeyboard/index.tsx @@ -6,7 +6,7 @@ interface NumericalKeyboardProps { onChange: (input: string) => void keyboardRef: React.MutableRefObject isDecimal?: boolean - allowNegative?: boolean + hasHyphen?: boolean } // the default keyboard layout intKeyboard that doesn't have decimal point and hyphen. @@ -14,10 +14,10 @@ export function NumericalKeyboard({ onChange, keyboardRef, isDecimal = false, - allowNegative = false, + hasHyphen = false, }: NumericalKeyboardProps): JSX.Element { const layoutName = `${isDecimal ? 'float' : 'int'}${ - allowNegative ? 'NegKeyboard' : 'Keyboard' + hasHyphen ? 'NegKeyboard' : 'Keyboard' }` return (