feat: migrate @kyper/button and @kyper/select to MXUI and remove unused SelectionBox component

* feat: use MXUI Select component for property type manual account

* added the test

* added a test for property type

* add the build step in ci

* using TextField for select

* test if selecting an option works

* add required error validation test

* add required prop to select

---------

Co-authored-by: Clement Mwimo <clement.mwimo@mx.com>

Author: mwclemy

.github/workflows/build.yml

@@ -0,0 +1,24 @@
+name: Build
+
+on: pull_request
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/Iron'
+          check-latest: true
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build

src/views/manualAccount/ManualAccountForm-test.tsx

@@ -19,6 +19,7 @@ const accountTypeButtonName: Record<number, string> = {
   [AccountTypes.SAVINGS]: 'Savings',
   [AccountTypes.LOAN]: 'Loan',
   [AccountTypes.CREDIT_CARD]: 'Credit Card',
+  [AccountTypes.PROPERTY]: 'Property',
 }
 
 const buildMockApi = (apiOverrides: Partial<typeof baseApiValue> = {}) => ({
@@ -111,6 +112,17 @@ describe('<ManualAccountForm />', () => {
 
       expect(screen.getByLabelText(/interest rate/i)).toBeInTheDocument()
     })
+
+    it('renders the property type select field and allows selecting a value', async () => {
+      const { user } = await renderManualAccountForm({ accountType: AccountTypes.PROPERTY })
+
+      expect(screen.getByLabelText(/property type/i)).toBeInTheDocument()
+
+      await user.click(screen.getByLabelText(/property type/i))
+      await user.click(await screen.findByRole('option', { name: 'Vehicle' }))
+
+      expect(screen.getByRole('combobox', { name: /property type/i })).toHaveTextContent('Vehicle')
+    })
   })
 
   describe('Personal and Business Selection', () => {
@@ -172,6 +184,18 @@ describe('<ManualAccountForm />', () => {
       expect((await screen.findAllByText(/is required/i)).length).toBeGreaterThan(0)
       expect(mockApi.createAccount).not.toHaveBeenCalled()
     })
+
+    it('shows a required error for property type when saving without selecting a value', async () => {
+      const { user, mockApi } = await renderManualAccountForm({
+        accountType: AccountTypes.PROPERTY,
+      })
+
+      await user.type(screen.getByLabelText(/account name/i), 'My Property')
+      await user.click(screen.getByTestId('save-manual-account-button'))
+
+      expect(await screen.findByText('Property type is required')).toBeInTheDocument()
+      expect(mockApi.createAccount).not.toHaveBeenCalled()
+    })
   })
 
   describe('Form Submission', () => {

src/views/manualAccount/ManualAccountForm.tsx

@@ -9,10 +9,11 @@ import _startsWith from 'lodash/startsWith'
 import _isEmpty from 'lodash/isEmpty'
 
 import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
 import { Text } from '@mxenabled/mxui'
 import { MessageBox } from '@kyper/messagebox'
 import { useTokens } from '@kyper/tokenprovider'
-import { Select, SelectionBox, TextField } from 'src/privacy/input'
+import { SelectionBox, TextField } from 'src/privacy/input'
 
 import { __ } from 'src/utilities/Intl'
 import { fadeOut } from 'src/utilities/Animation'
@@ -307,15 +308,24 @@ export const ManualAccountForm = React.forwardRef<HTMLInputElement, ManualAccoun
             } else if (field.type === 'Select') {
               return (
                 <div key={i} style={styles.selectInput}>
-                  <Select
-                    data-test="select-input"
-                    errorText={errors[field.name]}
-                    items={field.options}
+                  <TextField
+                    error={!!errors[field.name]}
+                    fullWidth={true}
+                    helperText={errors[field.name]}
+                    inputProps={{ 'data-test': 'select-input' }}
                     label={field.label}
                     name={field.name}
                     onChange={handleTextInputChange}
-                    placeholder={__('Select a value')}
-                  />
+                    required={field.validation?.required || false}
+                    select={true}
+                    value={values[field.name]}
+                  >
+                    {field.options?.map((option) => (
+                      <MenuItem key={option.value} value={option.value}>
+                        {option.label}
+                      </MenuItem>
+                    ))}
+                  </TextField>
                 </div>
               )
             } else {