BA - add text input with formik option (#15)

* Add-TextInput-with-Formik-option

* Release TextField

Author: ficast

apps/docs/pages/index.tsx

@@ -29,11 +29,11 @@ export default function Docs() {
 
       <div style={{ width: theme.spacing(48) }}>
         <h2>{`<PasswordField />`}</h2>
-        <PasswordField />
+        <PasswordField name="password" />
 
-        <PasswordField helperText="Type your password." />
+        <PasswordField name="password" helperText="Type your password." />
 
-        <PasswordField error helperText="Incorrect entry." />
+        <PasswordField name="password" error helperText="Incorrect entry." />
       </div>
 
       <Divider style={{ margin: theme.spacing(2, 0) }} />

packages/design-system-mui/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @baseapp-frontend/design-system-mui
 
+## 1.1.0
+
+### Minor Changes
+
+- Added TextField
+- Added support to Formik (These will be changed in the future, just added to the sake of keep current baseapp-nextjs-mui-template working)
+
 ## 1.0.1
 
 ### Patch Changes

packages/design-system-mui/components/ButtonWithLoading/index.tsx

@@ -6,12 +6,14 @@ function ButtonWithLoading({
   loading = false,
   children,
   loadingChildren = <CircularProgress size="20px" />,
+  formik,
   ...props
 }: IButtonWitthLoadingProps) {
+  const _isLoading = formik ? formik.isSubmitting : loading
   return (
     <Button disabled={loading} {...props}>
       {children}
-      {loading && loadingChildren}
+      {_isLoading && loadingChildren}
     </Button>
   )
 }

packages/design-system-mui/components/ButtonWithLoading/types.d.ts

@@ -4,4 +4,5 @@ export interface IButtonWitthLoadingProps extends ButtonProps {
   children?: React.FC<any> | React.Element | string
   loading?: boolean
   loadingChildren?: React.FC<any> | React.Element
+  formik?: any // eslint-disable-line @typescript-eslint/no-explicit-any
 }

packages/design-system-mui/components/ImageUploader/index.tsx

@@ -7,8 +7,8 @@ import { ReactChild, ReactFragment, ReactPortal, Key } from 'react'
 function ImageUploader({
   images,
   setImages,
-  buttonLabel,
-  buttonRemoveLabel,
+  buttonLabel = 'Upload Image',
+  buttonRemoveLabel = 'Remove Image',
   name,
   error,
   helperText,
@@ -18,6 +18,8 @@ function ImageUploader({
   UploaderButtonProps,
   ...props
 }: IImageUploadInput) {
+  // @TODO: Add support for multiple images
+  // @TODO Add formik or other form context to support form validation
   const deleteImage = (index: number) => {
     const newImages = [...images]
     newImages.splice(index, 1)
@@ -47,7 +49,7 @@ function ImageUploader({
         {...UploaderButtonProps}
       >
         <UploadFileOutlinedIcon sx={{ marginRight: 1 }} />
-        {buttonLabel || 'Upload Photo'}
+        {buttonLabel}
       </UploaderButton>
       <input
         name={name}
@@ -59,7 +61,7 @@ function ImageUploader({
         {...props}
       />
       {error && <FormHelperText>{helperText}</FormHelperText>}
-      {images.map((img: ImageFile, index: number) => (
+      {images?.map((img: ImageFile, index: number) => (
         <ImageGroup key={index}>
           <Image src={img.imagePreviewUrl as string} alt="preview" {...ImageProps} />
           <LabelGroup>
@@ -72,7 +74,7 @@ function ImageUploader({
               color="primary"
               {...DeleteButtonProps}
             >
-              {buttonRemoveLabel || 'Remove Photo'}
+              {buttonRemoveLabel}
             </DeleteButton>
           </LabelGroup>
         </ImageGroup>

packages/design-system-mui/components/ImageUploader/types.d.ts

@@ -1,25 +1,18 @@
-export interface IInputBaseComponentProps
-  extends React.HTMLAttributes<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> {
-  // Accommodate arbitrary additional props coming from the `IInputProps` prop
-  [arbitrary: string]: any
-}
-
-export interface IInputProps extends IInputBaseComponentProps {
-  component?: React.ElementType<IInputBaseComponentProps> | React.FC<any>
-  templateComponent?: React.FC<any>
-  name: string
-  label?: string
-  helperText?: string
-}
-
-interface IImageUploadInput extends IInputProps {
+export interface IImageUploadInput extends IInputProps {
   ImageProps?: IImageProps
   ImageLabelProps?: IImageLabelProps
   DeleteButtonProps?: IImageDeleteButtonProps
-  image?: ImageFile[]
+  images: ImageFile[]
+  setImages: Dispatch<SetStateAction<never[]>>
+  buttonLabel?: string
+  buttonRemoveLabel?: string
+  name?: string
+  UploaderButtonProps?: IImageUploaderButtonProps
+  error?: boolean
+  helperText?: string
 }
 
-interface ImageFile {
+export interface ImageFile {
   file: File
   imagePreviewUrl: string | ArrayBuffer | null
 }

packages/design-system-mui/components/PasswordField/index.tsx

@@ -3,25 +3,27 @@ import IconButton from '@mui/material/IconButton'
 import InputAdornment from '@mui/material/InputAdornment'
 import Visibility from '@mui/icons-material/Visibility'
 import VisibilityOff from '@mui/icons-material/VisibilityOff'
-import { TextField } from './styled'
+import { StyledPasswordTextField } from './styled'
 import { useTheme } from '@mui/material'
-import { IPasswordFieldProps } from './types'
+import { ITextField } from '../TextField/types'
 
 function PasswordField({
   name = 'password',
   visibilityIconColor,
   InputLabelProps,
   InputProps,
+  formik,
   ...props
-}: IPasswordFieldProps): ReactElement {
+}: ITextField): ReactElement {
   const [viewPassword, setViewPassword] = useState(false)
   const theme = useTheme()
   return (
-    <TextField
+    <StyledPasswordTextField
       label="Password"
       placeholder="Password"
       type={viewPassword ? 'text' : 'password'}
       name={name}
+      formik={formik}
       InputLabelProps={{ ...InputLabelProps }}
       InputProps={{
         endAdornment: (

packages/design-system-mui/components/PasswordField/styled.tsx

@@ -1,10 +1,9 @@
-import { styled, makeStyles } from '@mui/material/styles'
-import { TextField as MuiITextField, TextFieldProps } from '@mui/material'
-import { FC } from 'react'
+import { styled } from '@mui/material/styles'
+import TextField from '../TextField'
 
-const TextField = styled(MuiITextField)(({ theme }) => ({
+const StyledPasswordTextField = styled(TextField)(({ theme }) => ({
   width: '100%',
   marginBottom: theme.spacing(2),
-})) as unknown as FC<TextFieldProps>
+}))
 
-export { TextField }
+export { StyledPasswordTextField }

packages/design-system-mui/components/PasswordField/types.d.ts

@@ -0,0 +1,18 @@
+import MuiTextField from '@mui/material/TextField'
+import { ITextField } from './types'
+
+function TextField({ name, formik, helperText, value, handleChange, ...props }: ITextField) {
+  const showError = (formik?.errors?.[name] && formik?.touched?.[name]) as boolean
+  return (
+    <MuiTextField
+      name={name}
+      onChange={formik?.handleChange || handleChange}
+      value={formik?.values?.[name] || value}
+      error={showError}
+      helperText={showError ? formik.errors?.[name] : helperText}
+      {...props}
+    />
+  )
+}
+
+export default TextField