[RTT-06] Integrate storybook for MUI

Author: Le Tuan Kiet

.storybook/main.js

@@ -0,0 +1,16 @@
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/preset-create-react-app"
+  ],
+  "framework": "@storybook/react",
+  "core": {
+    "builder": "@storybook/builder-webpack5"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

.vscode/settings.json

@@ -6,6 +6,6 @@
 		"**/CVS": true,
 		"**/.DS_Store": true,
 		"**/Thumbs.db": true,
-		"**/node_modules": true
+		"**/node_modules": false
 	}
 }

package.json

@@ -13,14 +13,14 @@
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.13",
-    "@types/react-dom": "^18.0.0",
     "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/uuid": "^8.3.4",
     "axios": "^0.27.2",
     "lodash": "^4.17.21",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "react": "^18.2.0",
     "typescript": "^4.4.2",
     "url-join": "^5.0.0",
     "uuid": "^9.0.0",
@@ -30,12 +30,24 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/*.stories.*"
+        ],
+        "rules": {
+          "import/no-anonymous-default-export": "off"
+        }
+      }
     ]
   },
   "browserslist": {
@@ -51,6 +63,19 @@
     ]
   },
   "devDependencies": {
-    "@types/lodash": "^4.14.186"
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/node-logger": "^6.5.12",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.12",
+    "@storybook/testing-library": "^0.0.13",
+    "@types/lodash": "^4.14.186",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.74.0"
   }
 }

src/App.tsx

@@ -1,4 +1,4 @@
-import { debounce, Typography } from '@mui/material';
+import { debounce } from '@mui/material';
 import { useEffect, useReducer, useState } from 'react';
 import { getInfoCity } from './api/weather';
 import './App.css';
@@ -45,7 +45,6 @@ function App() {
 
 	return (
 		<div className="App">
-			<Typography variant="h3">Hello word</Typography>
 			<div className={`wrapper ${isSuccess && 'active'}`}>
 				<header>
 					<i className="bx bx-left-arrow-alt" onClick={() => setIsSuccess(false)}></i>Weather App
@@ -58,6 +57,7 @@ function App() {
 						<button disabled={state.isLoading} onClick={() => getInfoDevice()}>
 							Get Device Location
 						</button>
+
 					</div>
 				</section>
 

src/assets/style/abstracts/variables.tsx

@@ -30,6 +30,6 @@ export default {
 	},
 
 	text: {
-		primary: 'white',
+		primary: 'black',
 	},
 } as const;

src/assets/style/base/global.tsx

@@ -1,4 +1,5 @@
 import { Theme } from '@mui/material';
+import { lightBlue } from '@mui/material/colors';
 
 /**
  * @style CssBaseLine,
@@ -13,7 +14,7 @@ export default {
         }
 
         body{
-            background-color: ${themeParam.palette.secondary.contrastText}
+            background-color: ${lightBlue[200]}
         }
         
         .content-default-layout{

src/components/button.component.tsx

@@ -0,0 +1,18 @@
+import {
+  Button as MuiButton,
+  ButtonProps as MuiButtonProps
+} from "@mui/material";
+
+interface ButtonProps extends MuiButtonProps {
+  label:string
+}
+
+export const Button = ({label,...rest}:ButtonProps) => (
+  <MuiButton {...rest}>{label}</MuiButton>
+)
+
+Button.defaultProps = {
+  variant: "contained",
+  size: "medium",
+  color: "primary",
+};