(BA-903) design-system-mui package (#10)

* (BA-903) starter design-system-mui package

* update-mui-design-system

* update-mui-design-system

* update-mui-design-system

* fix-build

* update-yarn-lock

* create design-system-mui

Co-authored-by: Alexandre Anicio <[email protected]>
Co-authored-by: Filipe de Castro <[email protected]>

Author: anicioalexandre

.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?