goobs-frontend 0.8.6 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "type": "module",
   "description": "A comprehensive React-based UI library built on Material-UI, offering a wide range of customizable components including grids, typography, buttons, cards, forms, navigation, pricing tables, steppers, tooltips, accordions, and more. Designed for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.",
   "license": "MIT",
@@ -19,35 +19,35 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@emotion/cache": "^11.13.1",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.4",
-    "@mui/material": "^6.1.4",
-    "@types/lodash": "^4.17.12",
+    "@emotion/cache": "^11.13.5",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@types/lodash": "^4.17.13",
     "highlight.js": "^11.10.0",
-    "jotai": "^2.10.1",
+    "jotai": "^2.10.3",
     "lodash": "^4.17.21",
-    "next": "15.0.0",
+    "next": "15.0.3",
     "otplib": "^12.0.1",
     "react-datepicker": "^7.5.0",
     "react-qr-code": "^2.0.15"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^15.0.0",
-    "@types/node": "^22.7.8",
-    "@types/react": "18.3.11",
+    "@next/eslint-plugin-next": "^15.0.3",
+    "@types/node": "^22.10.0",
+    "@types/react": "18.3.12",
     "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.11.0",
-    "@typescript-eslint/parser": "^8.11.0",
-    "eslint": "^9.13.0",
-    "eslint-config-next": "^15.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "eslint": "^9.15.0",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.6.3"
+    "typescript": "^5.7.2"
   },
   "files": [
     "src"

package/src/components/Content/Structure/phoneNumber/usePhoneNumber.tsx

@@ -1,11 +1,10 @@
 'use client'
 import React from 'react'
-import PhoneNumberField, {
-  PhoneNumberFieldProps,
-} from './../../../PhoneNumberField'
+import PhoneNumberField from '../../../PhoneNumberField'
 import { columnconfig, cellconfig } from '../../../Grid'
+import { TextFieldProps } from '@mui/material'
 
-export interface ExtendedPhoneNumberFieldProps extends PhoneNumberFieldProps {
+export type ExtendedPhoneNumberFieldProps = TextFieldProps & {
   columnconfig?: Partial<columnconfig>
   cellconfig?: cellconfig
 }

package/src/components/Content/Structure/textfield/useTextField.tsx

@@ -1,15 +1,14 @@
+'use client'
 import React from 'react'
-import TextField, {
-  CustomTextFieldProps,
-} from '../../../../components/TextField'
+import TextField from '../../../../components/TextField'
 import { columnconfig, cellconfig } from '../../../Grid'
+import { TextFieldProps } from '@mui/material'
 
 type ExtendedColumnConfig = Omit<columnconfig, 'component'> & {
   component?: columnconfig['component']
 }
 
-export interface ExtendedTextFieldProps
-  extends Omit<CustomTextFieldProps, 'columnconfig'> {
+export type ExtendedTextFieldProps = TextFieldProps & {
   columnconfig?: ExtendedColumnConfig
   cellconfig?: cellconfig
 }
@@ -24,15 +23,6 @@ const useTextField = (grid: {
     index: number
   ): columnconfig => {
     const {
-      name,
-      label,
-      placeholder,
-      value,
-      onChange,
-      onFocus,
-      onBlur,
-      error,
-      InputProps,
       columnconfig: itemColumnConfig,
       cellconfig,
       ...restProps
@@ -54,21 +44,7 @@ const useTextField = (grid: {
       cellconfig: {
         ...cellconfig,
       },
-      component: (
-        <TextField
-          key={`textfield-${index}`}
-          name={name}
-          label={label}
-          placeholder={placeholder}
-          value={value}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          error={error}
-          InputProps={InputProps}
-          {...restProps}
-        />
-      ),
+      component: <TextField key={`textfield-${index}`} {...restProps} />,
     }
 
     return mergedConfig

package/src/components/PhoneNumberField/index.tsx

@@ -1,45 +1,6 @@
 'use client'
-import React, { useState, useCallback } from 'react'
-import { TextField, TextFieldProps } from '@mui/material'
-import { styled } from '@mui/material/styles'
-
-export interface PhoneNumberFieldProps
-  extends Omit<TextFieldProps, 'onChange'> {
-  initialValue?: string
-  onChange?: () => void
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-  label?: string
-}
-
-const StyledTextField = styled(TextField)<{
-  backgroundcolor?: string
-  outlinecolor?: string
-  fontcolor?: string
-}>(({ theme, backgroundcolor, outlinecolor, fontcolor }) => ({
-  '& .MuiOutlinedInput-root': {
-    backgroundColor: backgroundcolor || theme.palette.background.paper,
-    '& fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&:hover fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-    '&.Mui-focused fieldset': {
-      borderColor: outlinecolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputLabel-root': {
-    color: fontcolor || theme.palette.text.primary,
-    '&.Mui-focused': {
-      color: fontcolor || theme.palette.primary.main,
-    },
-  },
-  '& .MuiInputBase-input': {
-    color: fontcolor || theme.palette.text.primary,
-  },
-}))
+import React, { useCallback, useMemo, useState } from 'react'
+import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
 const formatPhoneNumber = (value: string): string => {
   const digits = value.replace(/\D/g, '')
@@ -57,47 +18,110 @@ const formatPhoneNumber = (value: string): string => {
   return formattedNumber.trim()
 }
 
-const PhoneNumberField: React.FC<PhoneNumberFieldProps> = ({
-  initialValue = '',
-  onChange,
-  backgroundcolor,
-  outlinecolor,
-  fontcolor,
-  label = 'Phone Number',
-  ...rest
-}) => {
+const PhoneNumberField: React.FC<TextFieldProps> = React.memo(props => {
+  const {
+    name,
+    label = 'Phone Number',
+    placeholder,
+    onChange,
+    onFocus,
+    onBlur,
+    value = '',
+    error,
+    ...restProps
+  } = props
+
   const [phoneNumber, setPhoneNumber] = useState(
-    formatPhoneNumber(initialValue)
+    formatPhoneNumber(value as string)
   )
 
-  const handlePhoneNumberChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
       const input = e.target.value
       let strippedInput = input.replace(/^\+1\s?/, '').replace(/\D/g, '')
       strippedInput = strippedInput.slice(0, 10)
       const formattedValue =
         strippedInput.length > 0 ? formatPhoneNumber(strippedInput) : '+1 '
       setPhoneNumber(formattedValue)
-      onChange?.()
+      if (onChange) {
+        onChange(e)
+      }
     },
     [onChange]
   )
 
+  const handleFocus = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onFocus) {
+        onFocus(e)
+      }
+    },
+    [onFocus]
+  )
+
+  const handleBlur = useCallback(
+    (e: React.FocusEvent<HTMLInputElement>) => {
+      if (onBlur) {
+        onBlur(e)
+      }
+    },
+    [onBlur]
+  )
+
+  const handleClick = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault()
+  }, [])
+
+  const inputProps = useMemo(
+    () => ({
+      style: {
+        height: '40px',
+        padding: '8px 14px',
+      },
+    }),
+    []
+  )
+
+  const InputProps = useMemo(
+    () => ({
+      style: {
+        height: '45px',
+      },
+    }),
+    []
+  )
+
   return (
-    <StyledTextField
-      label={label}
-      value={phoneNumber}
-      onChange={handlePhoneNumberChange}
-      backgroundcolor={backgroundcolor}
-      outlinecolor={outlinecolor}
-      fontcolor={fontcolor}
-      fullWidth
-      inputProps={{
-        maxLength: 16,
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%',
+        marginTop: '5px',
+        height: '70px',
       }}
-      {...rest}
-    />
+      onClick={handleClick}
+    >
+      <MuiTextField
+        name={name}
+        label={label}
+        placeholder={placeholder}
+        onChange={handleChange}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        value={phoneNumber}
+        error={error}
+        fullWidth
+        variant="outlined"
+        inputProps={inputProps}
+        InputProps={InputProps}
+        {...restProps}
+      />
+    </Box>
   )
-}
+})
+
+PhoneNumberField.displayName = 'PhoneNumberField'
 
 export default PhoneNumberField

package/src/components/TextField/index.tsx

@@ -1,11 +1,8 @@
+'use client'
 import React, { useCallback, useMemo } from 'react'
 import { Box, TextField as MuiTextField, TextFieldProps } from '@mui/material'
 
-export interface CustomTextFieldProps extends Omit<TextFieldProps, 'name'> {
-  name: string
-}
-
-const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
+const TextField: React.FC<TextFieldProps> = React.memo(props => {
   const {
     name,
     label,
@@ -16,7 +13,6 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
     value,
     error,
     sx,
-    InputProps,
     ...restProps
   } = props
 
@@ -64,31 +60,27 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
     []
   )
 
-  const mergedInputProps = useMemo(
+  const slotProps = useMemo(
     () => ({
-      ...InputProps,
-      style: {
-        ...inputStyle,
-        ...InputProps?.style,
+      input: {
+        style: inputStyle,
       },
-    }),
-    [InputProps, inputStyle]
-  )
-
-  const labelStyle = useMemo(
-    () => ({
-      '&.MuiInputLabel-shrink': {
-        top: '0px',
-        left: '0px',
-      },
-      '&:not(.MuiInputLabel-shrink)': {
-        transform: 'scale(1)',
-        transformOrigin: 'top left',
-        top: '9px',
-        left: '12px',
+      inputLabel: {
+        sx: {
+          '&.MuiInputLabel-shrink': {
+            top: '0px',
+            left: '0px',
+          },
+          '&:not(.MuiInputLabel-shrink)': {
+            transform: 'scale(1)',
+            transformOrigin: 'top left',
+            top: '9px',
+            left: '12px',
+          },
+        },
       },
     }),
-    []
+    [inputStyle]
   )
 
   return (
@@ -99,7 +91,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         justifyContent: 'center',
         width: '100%',
         marginTop: '5px',
-        height: '62px',
+        height: '70px',
         ...sx,
       }}
       onClick={handleClick}
@@ -113,10 +105,7 @@ const TextField: React.FC<CustomTextFieldProps> = React.memo(props => {
         onBlur={handleBlur}
         value={value}
         error={error}
-        InputProps={mergedInputProps}
-        InputLabelProps={{
-          sx: labelStyle,
-        }}
+        slotProps={slotProps}
         fullWidth
         variant="outlined"
         {...restProps}

package/src/index.ts

@@ -71,7 +71,6 @@ import { ExtendedImageProps } from './components/Content/Structure/image/useImag
 import { ExtendedConfirmationCodeInputsProps } from './components/Content/Structure/confirmationinput/useConfirmationInput'
 import { ExtendedRadioGroupProps } from './components/Content/Structure/radiogroup/useRadioGroup'
 import { ExtendedPhoneNumberFieldProps } from './components/Content/Structure/phoneNumber/usePhoneNumber'
-import { CustomTextFieldProps } from './components/TextField'
 // Colors
 import {
   moss,
@@ -268,7 +267,6 @@ export type { CustomToolbarComponentProps }
 export type { TransferListComponentProps }
 export type { StyledTooltipComponentProps }
 export type { DropdownOption }
-export type { CustomTextFieldProps }
 
 // New type exports
 export type { DateFieldProps }