feat: migrate @kyper/button component to MXUI and clean up unused select and selectionbox components

* converted kyper button

* feat: migrate @kyper/button component to MXUI

* remove name prop

* fix the test

* fixing the failing tests

* Removed unused @kyper/select code (#352)

* remove unsed select code

* feat: remove unused @kyper/select component

* remove select input

---------

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

* Remove @kyper/selectionbox (#354)

* feat: remove @kyper/selectionbox

* remove remaining @kyper/selectionbox reference

---------

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

---------

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

Author: mwclemy

.eslintrc.cjs

@@ -33,14 +33,6 @@ module.exports = {
             name: '@kyper/input',
             message: "Please import from 'src/privacy/input instead'.",
           },
-          {
-            name: '@kyper/select',
-            message: "Please import from 'src/privacy/input instead'.",
-          },
-          {
-            name: '@kyper/selectionbox',
-            message: "Please import from 'src/privacy/input instead'.",
-          },
           {
             name: '@kyper/textarea',
             message: "Please import from 'src/privacy/input instead'.",

package-lock.json

@@ -43,15 +43,12 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@kyper/button": "^4.0.0",
     "@kyper/hooks": "^1.0.0",
     "@kyper/icon": "^1.18.1",
     "@kyper/input": "^6.1.0",
     "@kyper/institutionlogo": "^3.1.0",
     "@kyper/messagebox": "^3.1.0",
     "@kyper/progressindicators": "^3.1.0",
-    "@kyper/select": "^2.0.0",
-    "@kyper/selectionbox": "^2.1.0",
     "@kyper/tag": "^3.0.0",
     "@kyper/tokenprovider": "^4.0.1",
     "@kyper/userfeedback": "^2.0.0",

package.json

@@ -3,7 +3,7 @@ import React, { MutableRefObject } from 'react'
 import _range from 'lodash/range'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Button } from '@kyper/button'
+import { Button } from '@mui/material'
 import { Text } from '@mxenabled/mxui'
 
 import { fadeOut } from 'src/utilities/Animation'
@@ -15,8 +15,8 @@ import { getDelay } from 'src/utilities/getDelay'
 
 interface DayOfMonthPicker {
   handleClose: () => void
-  handleSelect: (e: React.ChangeEvent) => void
-  name?: string
+  handleSelect: (e: React.MouseEvent<HTMLElement>) => void
+  name: string
 }
 
 export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPicker>(
@@ -61,15 +61,12 @@ export const DayOfMonthPicker = React.forwardRef<HTMLInputElement, DayOfMonthPic
                 autoFocus={day === 1}
                 data-test={`date-picker-button-${day}`}
                 key={day}
-                name={props.name || day}
-                onClick={(e: React.ChangeEvent) => {
-                  e.persist()
-
+                name={props.name}
+                onClick={(e: React.MouseEvent<HTMLElement>) => {
                   fadeOut(containerRef?.current, 'up', 300).then(() => props.handleSelect(e))
                 }}
                 style={styles.button}
                 value={day}
-                variant="transparent"
               >
                 {day}
               </Button>

src/components/DayOfMonthPicker.tsx

@@ -2,7 +2,6 @@
 // This is the ONLY file that @kyper related inputs should be directly imported
 
 import { Radio, PASSWORD_VALIDATIONS } from '@kyper/input'
-import { Select } from '@kyper/select'
 import { SelectionBox } from '@mxenabled/mxui'
 import { UserFeedback } from '@kyper/userfeedback'
 import { withProtection } from 'src/privacy/withProtection'
@@ -21,14 +20,12 @@ import { TextField } from '@mxenabled/mxui'
 
 const ProtectedTextField = withProtection(TextField)
 const ProtectedRadio = withProtection(Radio)
-const ProtectedSelect = withProtection(Select)
 const ProtectedSelectionBox = withProtection(SelectionBox)
 const ProtectedUserFeedback = withProtection(UserFeedback)
 
 export {
   ProtectedTextField as TextField,
   ProtectedRadio as Radio,
-  ProtectedSelect as Select,
   ProtectedSelectionBox as SelectionBox,
   ProtectedUserFeedback as UserFeedback,
   PASSWORD_VALIDATIONS as PasswordValidations,

src/privacy/input.ts

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { __ } from 'src/utilities/Intl'
 
 import { useTokens } from '@kyper/tokenprovider'
-import { Button } from '@kyper/button'
+import { Button } from '@mui/material'
 import { Text } from '@mxenabled/mxui'
 
 import { fadeOut } from 'src/utilities/Animation'
@@ -84,7 +84,7 @@ export const ManualAccountSuccess = (props) => {
             handleDone()
           }}
           style={styles.button}
-          variant="primary"
+          variant="contained"
         >
           {__('Done')}
         </Button>

src/views/manualAccount/ManualAccountSuccess.js

@@ -1,11 +1,8 @@
-declare module '@kyper/button'
 declare module '@kyper/tokenprovider'
 declare module '@kyper/institutionlogo'
 declare module '@kyper/messagebox'
 declare module '@kyper/userfeedback'
 declare module '@kyper/textarea'
-declare module '@kyper/selectionbox'
-declare module '@kyper/select'
 declare module '@kyper/input'
 declare module '@kyper/icon/Accounts'
 declare module '@kyper/icon/Check'