(BA-903) design-system-mui package

.gitignore

@@ -1,5 +1,8 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# custom
+dist
+
 # dependencies
 node_modules
 .pnp

apps/docs/next.config.js

@@ -1,4 +1,9 @@
-const withTM = require('next-transpile-modules')(['@baseapp-frontend/core'])
+const withTM = require('next-transpile-modules')([
+  '@baseapp-frontend/core',
+  '@baseapp-frontend/config',
+  '@baseapp-frontend/design-system-mui',
+  '@baseapp-frontend/tsconfig',
+])
 
 module.exports = withTM({
   reactStrictMode: true,

apps/docs/package.json

@@ -3,16 +3,20 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3099",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@baseapp-frontend/core": "*",
-    "next": "12.1.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "@baseapp-frontend/design-system-mui": "*",
+    "@emotion/react": "^11.10.0",
+    "@emotion/styled": "^11.10.0",
+    "@mui/material": "^5.10.0",
+    "next": "^12.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@baseapp-frontend/config": "*",

apps/docs/pages/index.tsx

@@ -1,7 +1,54 @@
+import {
+  ButtonWithLoading,
+  PasswordField,
+  ImageUploader,
+} from '@baseapp-frontend/design-system-mui'
+import { Divider, useTheme } from '@mui/material'
+import { useState } from 'react'
+
 export default function Docs() {
+  const [images, setImages] = useState([])
+  const theme = useTheme()
   return (
     <div>
-      <h1>Docs</h1>
+      <h1>Components demo</h1>
+      <Divider style={{ margin: theme.spacing(2, 0) }} />
+
+      <h2>{`<ButtonWithLoading>`}</h2>
+      <div style={{ width: theme.spacing(48), display: 'flex', flexDirection: 'column' }}>
+        <ButtonWithLoading variant="contained" style={{ margin: theme.spacing(2, 0) }}>
+          button
+        </ButtonWithLoading>
+
+        <ButtonWithLoading variant="contained" loading>
+          button
+        </ButtonWithLoading>
+      </div>
+
+      <Divider style={{ margin: theme.spacing(2, 0) }} />
+
+      <div style={{ width: theme.spacing(48) }}>
+        <h2>{`<PasswordField />`}</h2>
+        <PasswordField />
+
+        <PasswordField helperText="Type your password." />
+
+        <PasswordField error helperText="Incorrect entry." />
+      </div>
+
+      <Divider style={{ margin: theme.spacing(2, 0) }} />
+
+      <h2>{`<ImageUploader />`}</h2>
+      <div style={{ width: theme.spacing(48) }}>
+        <ImageUploader
+          images={images}
+          setImages={setImages}
+          name="imageUploeader"
+          ImageProps={{ style: { outline: '1px solid blue' } }}
+          buttonLabel="Upload your image here"
+          buttonRemoveLabel="Remove"
+        />
+      </div>
     </div>
   )
 }

packages/core/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @baseapp-frontend/core
 
+## 1.1.0
+
+### Minor Changes
+
+- Updated following packages:
+    - "next": from "^12.1.0" to "^12.2.4",
+    - "react": from "^17.0.2" to "^18.2.0",
+    - "react-dom": from "^17.0.2" to "^18.2.0",
+    - "@testing-library/react":from "^12.1.2" to "^13.3.0",
+    - "@testing-library/react-hooks": from "^7.0.2" to "^8.0.1",
+    - "react-test-renderer": from "^17.0.2" to "^18.2.0",
+
+
 ## 1.0.0
 
 ### Major Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseapp-frontend/core",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Core utilities.",
   "main": "./src/index.tsx",
   "scripts": {
@@ -30,8 +30,8 @@
     "@babel/core": "^7.16.12",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-typescript": "^7.16.7",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
     "@types/humps": "^2.0.1",
     "@types/jest": "^27.4.0",
     "@types/js-cookie": "^3.0.1",
@@ -43,11 +43,11 @@
     "babel-jest": "^27.4.6",
     "eslint": "^8.10.0",
     "jest": "^27.4.7",
-    "next": "^12.1.0",
     "prettier": "^2.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-test-renderer": "^17.0.2",
+    "next": "^12.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "ts-jest": "^27.1.3",
     "typescript": "^4.5.4"
   },

packages/design-system-mui/.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@baseapp-frontend/config/.eslintrc.js')

packages/design-system-mui/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@baseapp-frontend/config/.prettierrc.js')

packages/design-system-mui/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @baseapp-frontend/design-system-mui
+
+## 1.0.0
+
+### Major Changes
+
+- Created design-system-mui package
+- Created following components:
+    - ButtonWithLoading
+    - ImageUploader (component used in WTF project)
+    - PasswordField

packages/design-system-mui/README.md

@@ -0,0 +1,11 @@
+# **`@baseapp-frontend/design-system-mui`**
+
+## **Overview**
+
+This package defines our design system configuration (e.g. color pallete, typography, spacings, etc). It also shares reusable components that make up the design system as a whole.
+
+## **What should be added here?**
+
+In order to add any new feature inside the `design-system-mui` package, we need to ask ourselves some questions:
+
+- Is that feature part of the design system configuration or is it a reusable design component?

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

@@ -0,0 +1,19 @@
+import { Button } from '@mui/material'
+import { CircularProgress } from './styled'
+import { IButtonWitthLoadingProps } from './types'
+
+function ButtonWithLoading({
+  loading = false,
+  children,
+  loadingChildren = <CircularProgress size="20px" />,
+  ...props
+}: IButtonWitthLoadingProps) {
+  return (
+    <Button disabled={loading} {...props}>
+      {children}
+      {loading && loadingChildren}
+    </Button>
+  )
+}
+
+export default ButtonWithLoading

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

@@ -0,0 +1,11 @@
+import { styled } from '@mui/material/styles'
+import { CircularProgress as MuiCircularProgress, CircularProgressProps } from '@mui/material'
+import { FC } from 'react'
+
+export const CircularProgress = styled(MuiCircularProgress)(({ theme }) => ({
+  position: 'absolute',
+  top: '50%',
+  left: '50%',
+  marginTop: '-10px',
+  marginLeft: '-10px',
+})) as unknown as FC<CircularProgressProps>

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

@@ -0,0 +1,7 @@
+import { Button, ButtonProps } from '@mui/material'
+
+export interface IButtonWitthLoadingProps extends ButtonProps {
+  children?: React.FC<any> | React.Element | string
+  loading?: boolean
+  loadingChildren?: React.FC<any> | React.Element
+}

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

@@ -0,0 +1,84 @@
+import { FormControl, FormHelperText } from '@mui/material'
+import UploadFileOutlinedIcon from '@mui/icons-material/UploadFileOutlined'
+import type { IImageUploadInput, ImageFile } from './types'
+import { ImageGroup, Image, UploaderButton, LabelGroup, ImageLabel, DeleteButton } from './styled'
+import { ReactChild, ReactFragment, ReactPortal, Key } from 'react'
+
+function ImageUploader({
+  images,
+  setImages,
+  buttonLabel,
+  buttonRemoveLabel,
+  name,
+  error,
+  helperText,
+  ImageProps,
+  ImageLabelProps,
+  DeleteButtonProps,
+  UploaderButtonProps,
+  ...props
+}: IImageUploadInput) {
+  const deleteImage = (index: number) => {
+    const newImages = [...images]
+    newImages.splice(index, 1)
+    setImages(newImages)
+  }
+
+  function onChange(e: any): void {
+    //eslint-disable-line @typescript-eslint/no-explicit-any
+    for (let i = 0; i < e.target?.files?.length; i++) {
+      const file = e.target?.files[i]
+      const fileReader = new FileReader()
+      fileReader.onload = () => {
+        setImages([{ file: file, imagePreviewUrl: fileReader.result }])
+      }
+      fileReader.readAsDataURL(file)
+    }
+  }
+
+  return (
+    <FormControl error={error} fullWidth>
+      <UploaderButton
+        component="label"
+        htmlFor={'imageInput' + name}
+        variant="outlined"
+        color="primary"
+        sx={{ display: images.length ? 'none' : 'auto' }}
+        {...UploaderButtonProps}
+      >
+        <UploadFileOutlinedIcon sx={{ marginRight: 1 }} />
+        {buttonLabel || 'Upload Photo'}
+      </UploaderButton>
+      <input
+        name={name}
+        id={'imageInput' + name}
+        type="file"
+        accept="image/*"
+        onChange={onChange}
+        style={{ display: 'none' }}
+        {...props}
+      />
+      {error && <FormHelperText>{helperText}</FormHelperText>}
+      {images.map((img: ImageFile, index: number) => (
+        <ImageGroup key={index}>
+          <Image src={img.imagePreviewUrl as string} alt="preview" {...ImageProps} />
+          <LabelGroup>
+            <ImageLabel variant="caption" {...ImageLabelProps}>
+              {img.file.name}
+            </ImageLabel>
+            <DeleteButton
+              onClick={() => deleteImage(index)}
+              variant="text"
+              color="primary"
+              {...DeleteButtonProps}
+            >
+              {buttonRemoveLabel || 'Remove Photo'}
+            </DeleteButton>
+          </LabelGroup>
+        </ImageGroup>
+      ))}
+    </FormControl>
+  )
+}
+
+export default ImageUploader

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

@@ -0,0 +1,53 @@
+import { styled } from '@mui/material/styles'
+import { Button as MuiButton, Typography } from '@mui/material'
+import { FC } from 'react'
+import { fontSize } from '../../styles/utils'
+
+const UploaderButton = styled(MuiButton)(({ theme }) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+  border: `1px dashed ${theme.palette.grey[500]}`,
+  borderRadius: '8px',
+  height: '46px',
+  color: theme.palette.grey[500],
+  textTransform: 'capitalize',
+})) as unknown as typeof MuiButton
+
+const ImageGroup = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  marginTop: theme.spacing(2),
+})) as unknown as FC
+
+const Image = styled('img')(({ theme }) => ({
+  width: '87px',
+  height: '87px',
+  objectFit: 'cover',
+  borderRadius: theme.spacing(1),
+})) as unknown as FC<JSX.IntrinsicElements['img']>
+
+const LabelGroup = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  justifyContent: 'flex-start',
+  marginLeft: theme.spacing(1),
+})) as unknown as FC
+
+const ImageLabel = styled(Typography)(({ theme }) => ({
+  color: theme.palette.grey[500],
+  fontSize: fontSize(16),
+  padding: theme.spacing(1),
+})) as unknown as typeof Typography
+
+const DeleteButton = styled(MuiButton)(({ theme }) => ({
+  color: theme.palette.warning.main,
+  textDecoration: 'underline',
+  textTransform: 'capitalize',
+  fontSize: fontSize(14),
+  '&:hover': {
+    color: theme.palette.warning.light,
+  },
+})) as unknown as typeof MuiButton
+
+export { UploaderButton, ImageGroup, Image, LabelGroup, ImageLabel, DeleteButton }

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

@@ -0,0 +1,25 @@
+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 {
+  ImageProps?: IImageProps
+  ImageLabelProps?: IImageLabelProps
+  DeleteButtonProps?: IImageDeleteButtonProps
+  image?: ImageFile[]
+}
+
+interface ImageFile {
+  file: File
+  imagePreviewUrl: string | ArrayBuffer | null
+}