installed CBS with overrides (#25)

albert118 · Apr 2, 2023 · d8a7ea3 · d8a7ea3
1 parent 10b84f4
commit d8a7ea3
Show file tree

Hide file tree

Showing 94 changed files with 1,487 additions and 852 deletions.
diff --git a/meal-ui/package-lock.json b/meal-ui/package-lock.json
diff --git a/meal-ui/package.json b/meal-ui/package.json
@@ -4,6 +4,8 @@
 	"proxy": "https://localhost:7078/",
 	"private": true,
 	"dependencies": {
+		"@carbon/react": "^1.1.0",
+		"@carbon/themes": "^11.17.0",
 		"@fortawesome/fontawesome-free": "^6.2.1",
 		"@fortawesome/fontawesome-svg-core": "^6.2.1",
 		"@fortawesome/free-brands-svg-icons": "^6.2.1",
@@ -21,8 +23,16 @@
 		"react-fetch-hook": "^1.9.5",
 		"react-router-dom": "^6.6.1",
 		"react-scripts": "^5.0.1",
+		"sass": "^1.51.0",
+		"uninstall": "^0.0.0",
 		"web-vitals": "^2.1.4"
 	},
+	"overrides": {
+		"@carbon/react": {
+			"react": "^18",
+			"react-dom": "^18"
+		}
+	},
 	"scripts": {
 		"start": "react-scripts start",
 		"build": "react-scripts build",

diff --git a/meal-ui/src/App.js b/meal-ui/src/App.js
@@ -1,5 +1,5 @@
-import 'styles/styles.css';
-import RouterConfig from './navigation/RouterConfig';
+import 'styles/styles.scss';
+import RouterConfig from 'navigation/RouterConfig';
 import { BrowserRouter } from 'react-router-dom';
 
 export default function App() {

diff --git a/meal-ui/src/components/Button/Button.js b/meal-ui/src/components/Button/Button.js
@@ -1,55 +1,47 @@
-import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from '@carbon/react';
 
-const Button = props => {
-	const { className, handler } = props;
-
-	const classes = className ? `btn ${className}` : `btn`;
-
+const CustomButton = ({ className, handler, children, ...additionalProps }) => {
 	return (
-		<button
-			className={classes}
-			type='button'
+		<Button
+			{...additionalProps}
+			className={className ? `btn  ${className}` : `btn`}
 			onClick={handler}
 		>
-			{props.children}
-		</button>
+			{children}
+		</Button>
 	);
 };
 
-const IconButton = props => {
-	const { faIcon, handler, isPrimary } = props;
-
-	const classes = isPrimary ? 'icon-btn primary-icon-btn' : 'icon-btn';
-
+const IconButton = ({ faIcon, ...additionalProps }) => {
 	return (
-		<button
-			className={classes}
-			type='button'
-			onClick={handler}
+		<Button
+			{...additionalProps}
+			className='icon-btn cds--btn--icon-only'
+			kind='ghost'
+			size='lg'
 		>
 			<FontAwesomeIcon icon={faIcon} />
-		</button>
+		</Button>
 	);
 };
 
-const LabelledIconButton = props => {
-	const { faIcon, handler, isPrimary } = props;
-
-	const classes = isPrimary
-		? 'icon-btn primary-icon-btn e-labelled-icon-btn'
-		: 'icon-btn e-labelled-icon-btn';
-
+const LabelledIconButton = ({
+	faIcon,
+	isPrimary,
+	children,
+	...additionalProps
+}) => {
 	return (
-		<button
-			className={classes}
-			type='button'
-			onClick={handler}
+		<Button
+			{...additionalProps}
+			className='btn'
+			kind={isPrimary ? 'primary' : 'ghost'}
 		>
 			<FontAwesomeIcon icon={faIcon} />
-			{props.children}
-		</button>
+			{children}
+		</Button>
 	);
 };
 
-export { Button, IconButton, LabelledIconButton };
+export { CustomButton as Button, IconButton, LabelledIconButton };
diff --git a/meal-ui/src/components/Card/Card.js b/meal-ui/src/components/Card/Card.js
@@ -1,22 +1,17 @@
 import TitleBar from 'components/TitleBar/TitleBar';
-import React from 'react';
+import { Tile } from '@carbon/react';
 
-
-const Card = props =>  {
-    const { className, title } = props;
-
-    const classes = className ? `card ${className}` : `card`;
-
-    return (
-        <div className={classes}>
-            <TitleBar>
-                {title}
-            </TitleBar>
-            <div className="content-slot">
-                {props.children}
-            </div>
-        </div>
-    );
+const Card = ({ className, title, children }) => {
+	return (
+		<Tile
+			className={
+				className ? `card common-card ${className}` : `card common-card`
+			}
+		>
+			<TitleBar>{title}</TitleBar>
+			<div className='content-slot'>{children}</div>
+		</Tile>
+	);
 };
 
-export default Card;
+export default Card;
diff --git a/meal-ui/src/components/Card/ImageCard.js b/meal-ui/src/components/Card/ImageCard.js
@@ -1,27 +1,23 @@
 import StatusBadge from 'components/StatusBadge';
-import Button from 'components/Button';
-
-const ImageCard = props => {
-	const { id, className, label, status, ctaHandler } = props;
-
-	const classes = className
-		? `card image-card ${className}`
-		: `card image-card`;
+import { ClickableTile } from '@carbon/react';
 
+const ImageCard = ({ id, className, label, status, ctaHandler, children }) => {
 	return (
-		<div className={classes}>
-			<div className='image-slot'>
-				{props.children}
-				<StatusBadge
-					className='e-image-status-badge'
-					status={status}
-				/>
-			</div>
+		<ClickableTile
+			onClick={() => ctaHandler(id)}
+			className={
+				className ? `card image-card ${className}` : `card image-card`
+			}
+		>
+			{children}
+			<StatusBadge
+				className='e-image-status-badge'
+				status={status}
+			/>
 			<div className='action-slot'>
 				<label className='action-label'>{label}</label>
-				<Button handler={() => ctaHandler(id)}>view</Button>
 			</div>
-		</div>
+		</ClickableTile>
 	);
 };
 

diff --git a/meal-ui/src/components/Card/SimpleCard.js b/meal-ui/src/components/Card/SimpleCard.js
@@ -1,14 +1,14 @@
-const SimpleCard = props => {
-	const { className } = props;
-
-	const classes = className
-		? `card simple-card ${className}`
-		: `card simple-card`;
+import { Tile } from '@carbon/react';
 
+const SimpleCard = ({ className, children }) => {
 	return (
-		<div className={classes}>
-			<div className='content-slot'>{props.children}</div>
-		</div>
+		<Tile
+			className={
+				className ? `card simple-card ${className}` : `card simple-card`
+			}
+		>
+			<div className='content-slot'>{children}</div>
+		</Tile>
 	);
 };
 

diff --git a/meal-ui/src/components/MinimalistSidebar/HeroBrandingLogo.js b/meal-ui/src/components/MinimalistSidebar/HeroBrandingLogo.js
@@ -0,0 +1,13 @@
+export function HeroBrandingLogo({ config, onClick }) {
+	return (
+		<div className='hero-branding-logo'>
+			<button
+				type='button'
+				onClick={onClick}
+			>
+				<h1 className='hero-title'>{config.BrandName}</h1>
+			</button>
+			<div className='divider' />
+		</div>
+	);
+}
diff --git a/meal-ui/src/components/MinimalistSidebar/MinimalistSidebar.js b/meal-ui/src/components/MinimalistSidebar/MinimalistSidebar.js
@@ -1,44 +1,38 @@
-import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { faCalendar, faBoxes, faGear } from '@fortawesome/free-solid-svg-icons';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
 import { AnimatedHamburger } from './AnimatedHamburger';
 import { NavLinkItem } from './NavLinkItem';
 
 import AppRoutes from 'navigation/AppRoutes';
 import config from 'config';
+import VersionInfo from 'VersionInfo';
+import { HeroBrandingLogo } from './HeroBrandingLogo';
 
-export default function MinimalistSidebar() {
+export default function MinimalistSidebar({
+	isActive,
+	setActive,
+	isInActive,
+	setInActive
+}) {
 	const navigate = useNavigate();
 
-	const handleDashboardClick = () => navigate(AppRoutes.root);
-	const handleRecipeViewClick = () => navigate(AppRoutes.recipes);
-	const handlePlanningClick = () => navigate(AppRoutes.planning);
-	const handleSettingsClick = () => navigate(AppRoutes.settings);
-
-	// the initial state is falsy inactive, the animation begins after the first click
-	const [isActive, setActive] = useState(false);
-	const [isInActive, setInActive] = useState(null);
-
 	const toggleActive = () => {
 		setActive(!isActive);
 		setInActive(isActive);
 	};
 
 	return (
-		<div
-			className={`minimalist-sidebar ${
-				isActive ? 'minimalist-sidebar-active' : ''
-			} ${isInActive ? 'minimalist-sidebar-inactive' : ''}`}
+		<header
+			className={`minimalist-sidebar
+			 	${isActive ? 'minimalist-sidebar-active' : ''} 
+				${isInActive ? 'minimalist-sidebar-inactive' : ''}`}
 		>
-			<div className='hero-branding-logo'>
-				<button
-					type='button'
-					onClick={handleDashboardClick}
-				>
-					<h1 className='hero-title'>{config.BrandName}</h1>
-				</button>
-			</div>
+			<HeroBrandingLogo
+				config={config}
+				onClick={() => navigate(AppRoutes.root)}
+			/>
 			<AnimatedHamburger callback={toggleActive} />
 			<div
 				className={
@@ -48,27 +42,35 @@ export default function MinimalistSidebar() {
 				<NavLinkItem
 					isActive={isActive}
 					icon={faCalendar}
-					handler={handlePlanningClick}
+					handler={() => navigate(AppRoutes.planning)}
 				>
 					Meal Planning
 				</NavLinkItem>
 				<NavLinkItem
 					isActive={isActive}
 					icon={faBoxes}
-					handler={handleRecipeViewClick}
+					handler={() => navigate(AppRoutes.recipes)}
 				>
 					Manage Recipes
 				</NavLinkItem>
-			</div>
-			<div className='setting-links'>
+
 				<NavLinkItem
 					isActive={isActive}
 					icon={faGear}
-					handler={handleSettingsClick}
+					handler={() => navigate(AppRoutes.settings)}
 				>
 					Settings
 				</NavLinkItem>
 			</div>
-		</div>
+			<div className='social-links'>
+				<NavLinkItem
+					isActive={isActive}
+					icon={faGithub}
+					handler={() => window.open(config.GitSocialLink, '_blank')}
+				>
+					release: {VersionInfo.toString()}
+				</NavLinkItem>
+			</div>
+		</header>
 	);
 }
diff --git a/meal-ui/src/components/MinimalistSidebar/NavLinkItem.js b/meal-ui/src/components/MinimalistSidebar/NavLinkItem.js
@@ -6,14 +6,14 @@ export function NavLinkItem(props) {
 	return isActive ? (
 		<LabelledIconButton
 			faIcon={icon}
-			handler={handler}
+			onClick={handler}
 		>
 			<div className='nav-label font-white'>{props.children}</div>
 		</LabelledIconButton>
 	) : (
 		<IconButton
 			faIcon={icon}
-			handler={handler}
+			onClick={handler}
 		/>
 	);
 }
diff --git a/meal-ui/src/components/Navigation/Footer.js b/meal-ui/src/components/Navigation/Footer.js
diff --git a/meal-ui/src/components/Navigation/index.js b/meal-ui/src/components/Navigation/index.js