Restructure

Author: modularcoder

.storybook/config.js

@@ -4,6 +4,7 @@ import { configure, addDecorator, addParameters } from '@storybook/react'
 import { withA11y } from '@storybook/addon-a11y'
 import { themes } from '@storybook/theming';
 import { ThemeProvider } from '@material-ui/styles'
+import { BrowserRouter } from 'react-router-dom' //
 
 
 import docsTheme from './theme'
@@ -28,7 +29,9 @@ addDecorator(withA11y);
 addDecorator(story => (
   <>
     <ThemeProvider theme={appTheme}>
-      {story()}
+      <BrowserRouter>
+        {story()}
+      </BrowserRouter>
     </ThemeProvider>
   </>
 ));

package.json

@@ -22,6 +22,7 @@
     "disqus-react": "^1.0.7",
     "lodash": "^4.17.15",
     "moment": "^2.24.0",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.11.0",
     "react-router-dom": "^5.1.2",
@@ -36,8 +37,8 @@
   "devDependencies": {
     "@storybook/addon-a11y": "^5.3.0-rc.4",
     "@storybook/addon-actions": "^5.3.0-rc.4",
-    "@storybook/addon-knobs": "^5.3.0-rc.4",
     "@storybook/addon-docs": "^5.3.0-rc.4",
+    "@storybook/addon-knobs": "^5.3.0-rc.4",
     "@storybook/addon-storysource": "^5.3.0-rc.4",
     "@storybook/addons": "^5.3.0-rc.4",
     "@storybook/preset-typescript": "^1.2.0",

src/App.stories.mdx

@@ -3,4 +3,20 @@
 
 # Modular Material Admin + React
 
-> React dashboard application starter
+> React dashboard application starter
+
+
+## Directory Structure
+
+
+## Module system
+
+
+## Layouts
+
+## Routing
+
+## Authorization
+
+## API calls and data
+

src/_layouts/DashboardLayout/Footer/Footer.js renamed to src/_common/AppFooter/Footer.js

@@ -1,5 +1,72 @@
 import React from 'react'
+import PropTypes from 'prop-types'
+import clsx from 'clsx'
 
-export const AppHeader = () => {
-  return <div>App Header</div>
+import { makeStyles } from '@material-ui/core/styles'
+import AppBar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+import IconButton from '@material-ui/core/IconButton'
+
+import IconMenu from '@material-ui/icons/Menu'
+
+import HeaderDemo from './AppHeaderDemo'
+
+import HeaderSearch from './AppHeaderSearch'
+import HeaderNotifications from './AppHeaderNotifications'
+import HeaderProfile from './AppHeaderProfile'
+
+/**
+ * The `Avatar` component is where all your avatars come to play.
+ */
+const Header = ({ onToggle }) => {
+  const classes = useStyles()
+
+  return (
+    <AppBar position="absolute" className={classes.header}>
+      <Toolbar className={classes.toolbar}>
+        <IconButton
+          edge="start"
+          color="inherit"
+          aria-label="Toggle sidebar"
+          onClick={onToggle}
+          className={clsx(classes.menuButton)}
+        >
+          <IconMenu />
+        </IconButton>
+        <HeaderDemo />
+        <div className={classes.actions}>
+          <HeaderSearch />
+          <HeaderNotifications />
+          <HeaderProfile />
+        </div>
+      </Toolbar>
+    </AppBar>
+  )
 }
+
+Header.propTypes = {
+  onToggle: PropTypes.func,
+}
+
+const useStyles = makeStyles(theme => ({
+  header: {
+    background: '#fff',
+    color: '#7b7b7b',
+    boxShadow: 'none',
+  },
+  toolbar: {},
+  menuButton: {},
+  actions: {
+    marginLeft: 'auto',
+    alignItems: 'center',
+    display: 'flex',
+  },
+  notificationsButton: {
+    marginRight: 23,
+  },
+  title: {
+    flexGrow: 1,
+  },
+}))
+
+export default Header

src/_layouts/DashboardLayout/Footer/index.js renamed to src/_common/AppFooter/index.js

@@ -1,21 +1,19 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
-import { Button } from '@storybook/react/demo'
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'
+import AppHeader from './AppHeader.js'
 
-<Meta title="General/AppHeader" component={Button} />
+<Meta title="General/Components/AppHeader" component={AppHeader} />
 
-# Checkbox
+# App Header
 
-With `MDX` we can define a story for `Button` right in the middle of our
-markdown documentation.
+Application header component.
 
 <Preview>
-  <Story name="all buttons">
-    <form>
-      <Button>
-        <span role="img" aria-label="so cool">
-          😀 😎 👍 💯
-        </span>
-      </Button>
-    </form>
+  <Story name="default header">
+    <AppHeader />
   </Story>
-</Preview>
+</Preview>
+
+## Props
+
+<Props of={AppHeader} />
+

src/_common/AppHeader/AppHeader.js

@@ -0,0 +1 @@
+export { default } from '../../../_common/AppHeader/Header'

src/_common/AppHeader/AppHeader.stories.mdx

@@ -0,0 +1 @@
+export { default } from './Sidebar'

src/_layouts/DashboardLayout/Header/HeaderDemo.js renamed to src/_common/AppHeader/AppHeaderDemo.js

@@ -6,9 +6,9 @@ import useMediaQuery from '@material-ui/core/useMediaQuery'
 import Drawer from '@material-ui/core/Drawer'
 import Hidden from '@material-ui/core/Hidden'
 
-import Header from './Header/Header'
-import Sidebar from './Sidebar/Sidebar'
-import Footer from './Footer'
+import AppHeader from '../../_common/AppHeader/AppHeader'
+import AppSidebar from '../../_common/AppSidebar/Sidebar'
+import AppFooter from '../../_common/AppFooter'
 
 export default function Dashboard({ children }) {
   const classes = useStyles()
@@ -45,7 +45,7 @@ export default function Dashboard({ children }) {
             classes.headerContainerDesktopDrawerCollapsed,
         )}
       >
-        <Header onToggle={handleSidebarToggle} />
+        <AppHeader onToggle={handleSidebarToggle} />
       </div>
       <div
         className={clsx(
@@ -101,7 +101,7 @@ export default function Dashboard({ children }) {
       <main className={classes.content}>
         <div className={classes.headerSpacer} />
         {children}
-        <Footer />
+        <AppFooter />
       </main>
     </div>
   )