feat: app bar design system

Signed-off-by: hxtree <[email protected]>

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",

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} />;
+};

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';

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'
+  }
+};