From bec2af62a3c6aa4c7543271082e06d24427fff9f Mon Sep 17 00:00:00 2001 From: Filipe de Castro Date: Mon, 15 Aug 2022 11:06:04 +0100 Subject: [PATCH 1/2] Add-TextInput-with-Formik-option --- apps/docs/pages/index.tsx | 6 ++--- .../components/ButtonWithLoading/index.tsx | 4 ++- .../components/ButtonWithLoading/types.d.ts | 1 + .../components/ImageUploader/index.tsx | 12 +++++---- .../components/ImageUploader/types.d.ts | 27 +++++++------------ .../components/PasswordField/index.tsx | 10 ++++--- .../components/PasswordField/styled.tsx | 11 ++++---- .../components/PasswordField/types.d.ts | 12 --------- .../components/TextField/index.tsx | 18 +++++++++++++ .../components/TextField/types.d.ts | 22 +++++++++++++++ packages/design-system-mui/index.ts | 12 ++++++++- 11 files changed, 86 insertions(+), 49 deletions(-) delete mode 100644 packages/design-system-mui/components/PasswordField/types.d.ts create mode 100644 packages/design-system-mui/components/TextField/index.tsx create mode 100644 packages/design-system-mui/components/TextField/types.d.ts diff --git a/apps/docs/pages/index.tsx b/apps/docs/pages/index.tsx index 38c36d54..9ddc7b10 100644 --- a/apps/docs/pages/index.tsx +++ b/apps/docs/pages/index.tsx @@ -29,11 +29,11 @@ export default function Docs() {

{``}

- + - + - +
diff --git a/packages/design-system-mui/components/ButtonWithLoading/index.tsx b/packages/design-system-mui/components/ButtonWithLoading/index.tsx index 750bee42..a36da816 100644 --- a/packages/design-system-mui/components/ButtonWithLoading/index.tsx +++ b/packages/design-system-mui/components/ButtonWithLoading/index.tsx @@ -6,12 +6,14 @@ function ButtonWithLoading({ loading = false, children, loadingChildren = , + formik, ...props }: IButtonWitthLoadingProps) { + const _isLoading = formik ? formik.isSubmitting : loading return ( ) } diff --git a/packages/design-system-mui/components/ButtonWithLoading/types.d.ts b/packages/design-system-mui/components/ButtonWithLoading/types.d.ts index 36db712b..fa8341e8 100644 --- a/packages/design-system-mui/components/ButtonWithLoading/types.d.ts +++ b/packages/design-system-mui/components/ButtonWithLoading/types.d.ts @@ -4,4 +4,5 @@ export interface IButtonWitthLoadingProps extends ButtonProps { children?: React.FC | React.Element | string loading?: boolean loadingChildren?: React.FC | React.Element + formik?: any // eslint-disable-line @typescript-eslint/no-explicit-any } diff --git a/packages/design-system-mui/components/ImageUploader/index.tsx b/packages/design-system-mui/components/ImageUploader/index.tsx index 7c73b314..f67391d2 100644 --- a/packages/design-system-mui/components/ImageUploader/index.tsx +++ b/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} > - {buttonLabel || 'Upload Photo'} + {buttonLabel} {error && {helperText}} - {images.map((img: ImageFile, index: number) => ( + {images?.map((img: ImageFile, index: number) => ( preview @@ -72,7 +74,7 @@ function ImageUploader({ color="primary" {...DeleteButtonProps} > - {buttonRemoveLabel || 'Remove Photo'} + {buttonRemoveLabel} diff --git a/packages/design-system-mui/components/ImageUploader/types.d.ts b/packages/design-system-mui/components/ImageUploader/types.d.ts index d847c369..258b15b2 100644 --- a/packages/design-system-mui/components/ImageUploader/types.d.ts +++ b/packages/design-system-mui/components/ImageUploader/types.d.ts @@ -1,25 +1,18 @@ -export interface IInputBaseComponentProps - extends React.HTMLAttributes { - // Accommodate arbitrary additional props coming from the `IInputProps` prop - [arbitrary: string]: any -} - -export interface IInputProps extends IInputBaseComponentProps { - component?: React.ElementType | React.FC - templateComponent?: React.FC - 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> + buttonLabel?: string + buttonRemoveLabel?: string + name?: string + UploaderButtonProps?: IImageUploaderButtonProps + error?: boolean + helperText?: string } -interface ImageFile { +export interface ImageFile { file: File imagePreviewUrl: string | ArrayBuffer | null } diff --git a/packages/design-system-mui/components/PasswordField/index.tsx b/packages/design-system-mui/components/PasswordField/index.tsx index 7d2f23b6..11370a33 100644 --- a/packages/design-system-mui/components/PasswordField/index.tsx +++ b/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 ( - ({ +const StyledPasswordTextField = styled(TextField)(({ theme }) => ({ width: '100%', marginBottom: theme.spacing(2), -})) as unknown as FC +})) -export { TextField } +export { StyledPasswordTextField } diff --git a/packages/design-system-mui/components/PasswordField/types.d.ts b/packages/design-system-mui/components/PasswordField/types.d.ts deleted file mode 100644 index c4ad30a0..00000000 --- a/packages/design-system-mui/components/PasswordField/types.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type { TextFieldProps } from '@mui/material' - -export interface IPasswordFieldProps extends ITextFieldProps { - component?: React.ElementType | React.FC - name?: string - label?: string - helperText?: string - InputLabelProps?: TextFieldProps['InputLabelProps'] - InputProps?: TextFieldProps['InputProps'] - visibilityIconColor?: string - error?: boolean -} diff --git a/packages/design-system-mui/components/TextField/index.tsx b/packages/design-system-mui/components/TextField/index.tsx new file mode 100644 index 00000000..ac96b67a --- /dev/null +++ b/packages/design-system-mui/components/TextField/index.tsx @@ -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 ( + + ) +} + +export default TextField diff --git a/packages/design-system-mui/components/TextField/types.d.ts b/packages/design-system-mui/components/TextField/types.d.ts new file mode 100644 index 00000000..2c783452 --- /dev/null +++ b/packages/design-system-mui/components/TextField/types.d.ts @@ -0,0 +1,22 @@ +import type { TextFieldProps } from '@mui/material' + +export interface IInputBaseComponentProps + extends React.HTMLAttributes { + // Accommodate arbitrary additional props coming from the `IInputProps` prop + [arbitrary: string]: any +} + +export interface IInputProps extends IInputBaseComponentProps { + component?: React.ElementType | React.FC + formik?: any // eslint-disable-line @typescript-eslint/no-explicit-any + templateComponent?: React.FC + name: string + label?: string + helperText?: string + value?: string + handleChange?: ( + event: React.ChangeEvent, + ) => void +} + +export type ITextField = TextFieldProps & IInputProps diff --git a/packages/design-system-mui/index.ts b/packages/design-system-mui/index.ts index 38f7c258..cb0aa126 100644 --- a/packages/design-system-mui/index.ts +++ b/packages/design-system-mui/index.ts @@ -10,7 +10,17 @@ export * from './styles/utils' export { default as theme } from './styles/theme' -export * from './components/ButtonWithLoading' export { default as ButtonWithLoading } from './components/ButtonWithLoading' +export type { IButtonWitthLoadingProps } from './components/ButtonWithLoading/types' + export { default as PasswordField } from './components/PasswordField' + export { default as ImageUploader } from './components/ImageUploader' +export type { IImageUploadInput, ImageFile } from './components/ImageUploader/types' + +export { default as TextField } from './components/TextField' +export type { + ITextField, + IInputBaseComponentProps, + IInputProps, +} from './components/TextField/types' From 0ddb52f023bc33c000f240eb7ad4c26f56b33ce9 Mon Sep 17 00:00:00 2001 From: Filipe de Castro Date: Mon, 15 Aug 2022 11:48:34 +0100 Subject: [PATCH 2/2] Release TextField --- packages/design-system-mui/CHANGELOG.md | 7 +++++++ packages/design-system-mui/package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/design-system-mui/CHANGELOG.md b/packages/design-system-mui/CHANGELOG.md index a2a6afcb..6e92a7d0 100644 --- a/packages/design-system-mui/CHANGELOG.md +++ b/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 diff --git a/packages/design-system-mui/package.json b/packages/design-system-mui/package.json index 393521d9..883d3019 100644 --- a/packages/design-system-mui/package.json +++ b/packages/design-system-mui/package.json @@ -1,7 +1,7 @@ { "name": "@baseapp-frontend/design-system-mui", "description": "Design System components and configurations.", - "version": "1.0.1", + "version": "1.1.0", "main": "./dist/index.ts", "module": "./dist/index.mjs", "types": "./dist/index.d.ts",