From 8a78b3ec8d6d5c9adda595fdcf35a483aefc6648 Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Wed, 6 Dec 2023 14:16:15 +0000
Subject: [PATCH] feat: app bar design system

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 services/design-system/package.json           |  6 +-
 services/design-system/src/Mui/AppBar.tsx     |  9 +++
 services/design-system/src/Mui/index.tsx      |  3 +-
 .../components/molecules/AppBar.stories.tsx   | 70 +++++++++++++++++++
 4 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 services/design-system/src/Mui/AppBar.tsx
 create mode 100644 services/design-system/stories/components/molecules/AppBar.stories.tsx

diff --git a/services/design-system/package.json b/services/design-system/package.json
index ce447da0..995fa4aa 100644
--- a/services/design-system/package.json
+++ b/services/design-system/package.json
@@ -13,10 +13,8 @@
   },
   "scripts": {
     "deploy": "gh-pages -d build",
-    "storybook": "storybook dev -p 6006 -s public",
-    "dev": "storybook dev -p 6006",
-    "build": "tsc",
-    "build:sb": "storybook build",
+    "dev": "storybook dev -p 6006 -s public",
+    "build": "tsc && storybook build",
     "build:all": "rush build -t .",
     "test": "",
     "watch": "tsc -w",
diff --git a/services/design-system/src/Mui/AppBar.tsx b/services/design-system/src/Mui/AppBar.tsx
new file mode 100644
index 00000000..41f6b653
--- /dev/null
+++ b/services/design-system/src/Mui/AppBar.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import MUIAppBar, { AppBarProps as MUIAppBarProps } from '@mui/material/AppBar';
+
+export type AppBarProps = {} & MUIAppBarProps;
+
+export const AppBar = (props: AppBarProps) => {
+  const { ...muiProps } = props;
+  return <MUIAppBar {...muiProps} />;
+};
diff --git a/services/design-system/src/Mui/index.tsx b/services/design-system/src/Mui/index.tsx
index 157d75e6..842844f7 100644
--- a/services/design-system/src/Mui/index.tsx
+++ b/services/design-system/src/Mui/index.tsx
@@ -9,6 +9,7 @@ export * from './LoadingButton';
 export * from './Link';
 export * from './Layout';
 export * from './Alert';
+export * from './AppBar';
 
 export type SelectChangeEvent<T = string> =
   | (Event & {
@@ -42,7 +43,5 @@ export {
   ListItemIcon,
   ListItemText,
   styled,
-  AppBar,
-  // AppBarProps,
   useTheme,
 } from '@mui/material';
diff --git a/services/design-system/stories/components/molecules/AppBar.stories.tsx b/services/design-system/stories/components/molecules/AppBar.stories.tsx
new file mode 100644
index 00000000..b144a1cb
--- /dev/null
+++ b/services/design-system/stories/components/molecules/AppBar.stories.tsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import { Meta } from '@storybook/react';
+import { AppBar, AppBarProps } from '../../../src';
+import {Toolbar} from '../../../src';
+import { FontAwesomeIcon, faBars, faGithub } from '../../../src';
+import { IconButton } from '../../../src';
+import { Typography } from '../../../src';
+
+export default {
+  title: 'Molecules/AppBar',
+  component: AppBar,
+} as Meta<typeof AppBar>;
+
+export const AppBarLight = (args: AppBarProps) =>
+<AppBar {...args}>
+  <Toolbar>
+    <IconButton
+      color="inherit"
+      aria-label="open drawer"
+      edge="start"
+    >
+      <FontAwesomeIcon icon={faBars} />
+    </IconButton>
+    <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+      LOGO
+    </Typography>
+    <IconButton
+      href="https://github.com/hxtree/cats-cradle"
+      color="inherit"
+    >
+      <FontAwesomeIcon icon={faGithub} />
+    </IconButton>
+  </Toolbar>
+</AppBar>;
+
+AppBarLight.args = {
+  position:"fixed",
+  style: {
+    backgroundColor: ''
+  }
+};
+
+export const AppBarDark = (args: AppBarProps) =>
+<AppBar {...args}>
+  <Toolbar>
+    <IconButton
+      color="inherit"
+      aria-label="open drawer"
+      edge="start"
+    >
+      <FontAwesomeIcon icon={faBars} />
+    </IconButton>
+    <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+      LOGO
+    </Typography>
+    <IconButton
+      href="https://github.com/hxtree/cats-cradle"
+      color="inherit"
+    >
+      <FontAwesomeIcon icon={faGithub} />
+    </IconButton>
+  </Toolbar>
+</AppBar>;
+
+AppBarDark.args = {
+  position:"fixed",
+  style: {
+    backgroundColor: '#000'
+  }
+};