AppBar Components and Store

.eslintrc.json

@@ -18,6 +18,7 @@
   },
   "plugins": ["react", "@typescript-eslint"],
   "rules": {
+    "no-extra-boolean-cast": 0,
     "react/react-in-jsx-scope": "off"
   }
 }

.github/workflows/chromatic.yml

@@ -16,7 +16,7 @@ jobs:
           fetch-depth: 0
 
       - name: Install dependencies
-        run: yarn && yarn add @mui/material @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite reflect-metadata
+        run: yarn && yarn add @mui/material @mui/icons-material @mui/lab @emotion/react @emotion/styled mobx mobx-react-lite
 
       - name: Lint
         run: yarn lint

.github/workflows/main.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node: ['12.x', '14.x', '16.x']
+        node: ['14.x', '16.x']
         os: [ubuntu-latest]
 
     steps:
@@ -28,7 +28,7 @@ jobs:
           node-version: ${{ matrix.node }}
 
       - name: Install
-        run: yarn install && yarn add reflect-metadata
+        run: yarn install && yarn add @mui/material @mui/icons-material @mui/lab @emotion/react @emotion/styled mobx mobx-react-lite
 
       - name: Lint
         run: yarn lint

.github/workflows/publish.yml

@@ -17,7 +17,7 @@ jobs:
           scope: '@euk-labs'
 
       - name: Install dependencies
-        run: yarn install && yarn add reflect-metadata
+        run: yarn install
 
       - name: Lint
         run: yarn lint

README.md

@@ -22,13 +22,13 @@ The goal is not to replace the MUI, but to be an extension
 
 Our dependencies:
 
-```bash
+````bash
 # Using npm:
-npm install @mui/material @mui/lab @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite
+npm install @mui/material @mui/icons-material @mui/lab @emotion/react @emotion/styled mobx mobx-react-lite
 
 # Using yarn:
-yarn add @mui/material @mui/lab @emotion/react @emotion/styled inversify inversify-react mobx mobx-react-lite
-```
+yarn add @mui/material @mui/icons-material @mui/lab @emotion/react @emotion/styled mobx mobx-react-lite
+
 
 Installing Componentz 🤩
 
@@ -38,7 +38,7 @@ npm i @euk-labs/componentz
 
 # Using yarn:
 yarn add @euk-labs/componentz
-```
+````
 
 ## Usage
 

package.json

@@ -24,21 +24,23 @@
     "build": "node ./scripts/build.js && tsc --project ./tsconfig.json --emitDeclarationOnly",
     "lint": "tsc --project ./tsconfig.json --noEmit && eslint src -c .eslintrc.json --ext tsx,ts",
     "test": "jest",
+    "test:watch": "jest --watch",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
     "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.16.4",
-    "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
+    "@babel/core": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "@babel/preset-react": "^7.16.5",
+    "@babel/preset-typescript": "^7.16.5",
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
-    "@emotion/react": "^11.6.0",
+    "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/lab": "^5.0.0-alpha.57",
-    "@mui/material": "^5.2.1",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/lab": "^5.0.0-alpha.61",
+    "@mui/material": "^5.2.5",
     "@storybook/addon-actions": "^6.4.0",
     "@storybook/addon-essentials": "^6.4.0",
     "@storybook/addon-interactions": "^6.4.0",
@@ -52,43 +54,45 @@
     "@testing-library/react": "^12.1.2",
     "@types/faker": "^5.5.9",
     "@types/jest": "^27.0.3",
-    "@types/ramda": "^0.27.52",
-    "@types/react": "^17.0.36",
-    "@typescript-eslint/eslint-plugin": "^5.4.0",
-    "@typescript-eslint/parser": "^5.4.0",
-    "babel-jest": "^27.3.1",
+    "@types/ramda": "^0.27.61",
+    "@types/react": "^17.0.38",
+    "@typescript-eslint/eslint-plugin": "^5.8.0",
+    "@typescript-eslint/parser": "^5.8.0",
+    "babel-jest": "^27.4.5",
     "babel-loader": "^8.2.3",
-    "chromatic": "^6.0.6",
-    "esbuild": "^0.14.3",
-    "eslint": "^8.3.0",
-    "eslint-plugin-react": "^7.27.1",
+    "chromatic": "^6.3.3",
+    "esbuild": "^0.14.8",
+    "eslint": "^8.5.0",
+    "eslint-plugin-react": "^7.28.0",
     "husky": "^7.0.4",
     "inversify": "^6.0.1",
     "inversify-react": "^1.0.1",
-    "jest": "^27.3.1",
-    "mobx": "^6.3.7",
+    "jest": "^27.4.5",
+    "mobx": "^6.3.10",
     "mobx-react-lite": "^3.2.2",
     "prettier": "^2.4.1",
     "ramda": "^0.27.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
-    "ts-jest": "^27.0.7",
+    "ts-jest": "^27.1.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.2"
+    "typescript": "^4.5.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.6.0",
     "@emotion/styled": ">=11.6.0",
+    "@mui/icons-material": "^5.2.4",
     "@mui/lab": ">=5.0.0-alpha.55",
     "@mui/material": ">=5.1.1",
-    "inversify": ">=6.0.1",
-    "inversify-react": ">=1.0.1",
     "mobx": ">=6.3.7",
     "mobx-react-lite": ">=3.2.2",
     "react": ">=17",
-    "react-dom": ">=17",
-    "reflect-metadata": ">=0.1.13"
+    "react-dom": ">=17"
   },
-  "dependencies": {}
+  "dependencies": {
+    "inversify": ">=6.0.1",
+    "inversify-react": ">=1.0.1",
+    "reflect-metadata": "^0.1.13"
+  }
 }

src/components/AppBar/AppBar.stories.tsx

@@ -0,0 +1,70 @@
+import {
+  Dashboard,
+  DomainAddRounded,
+  Info,
+  Mail,
+  AccountBox,
+  Flight,
+} from '@mui/icons-material';
+import { Box, Typography } from '@mui/material';
+import { action } from '@storybook/addon-actions';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { useEffect } from 'react';
+import AppBar from '.';
+import useUIStore from '../../hooks/useUIStore';
+
+const onClickAction = action('onClickAction');
+
+export default {
+  title: 'AppBar',
+  component: AppBar,
+} as ComponentMeta<typeof AppBar>;
+
+const Template: ComponentStory<typeof AppBar> = (args) => {
+  const uiStore = useUIStore();
+
+  useEffect(() => {
+    uiStore.appBar.setPages([
+      {
+        label: 'Home',
+        link: '/',
+        Icon: Dashboard,
+      },
+      {
+        label: 'Users',
+        link: '/users',
+        Icon: AccountBox,
+        sub: [
+          {
+            label: 'Address',
+            link: '/about/address',
+            Icon: DomainAddRounded,
+          },
+          {
+            label: 'Details',
+            link: '/about/info',
+            Icon: Info,
+          },
+        ],
+      },
+      {
+        label: 'Mail',
+        link: '/mail',
+        Icon: Mail,
+      },
+    ]);
+
+    uiStore.appBar.setDrawerHeaderContent(
+      <Box display="flex" alignItems="center" justifyContent="center">
+        <Flight sx={{ mr: 4 }} />
+        <Typography component="span">Project Title</Typography>
+      </Box>
+    );
+  }, []);
+  return <AppBar {...args} />;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Children Component Here',
+};

src/components/AppBar/AppBar.test.tsx

@@ -0,0 +1,76 @@
+import 'reflect-metadata';
+
+import TYPES from '../../containers/global.types';
+import { UIStoreType } from '@stores/types';
+import {
+  getByTestId,
+  render,
+  RenderResult,
+  screen,
+} from '@testing-library/react';
+import { AppBar, globalContainer } from '../../index';
+import { Container } from 'inversify';
+import { Provider } from 'inversify-react';
+import { Dashboard } from '@mui/icons-material';
+
+describe('AppBar', () => {
+  let onClickSpy: jest.Mock;
+  let mockedAppBar: RenderResult;
+  let unitContainer: Container;
+
+  beforeEach(() => {
+    onClickSpy = jest.fn();
+
+    unitContainer = globalContainer();
+
+    mockedAppBar = render(
+      <Provider container={unitContainer}>
+        <AppBar>AppBar Children</AppBar>
+      </Provider>
+    );
+  });
+
+  it('should renders correctly', async () => {
+    expect(getByTestId(mockedAppBar.container, 'appbar')).not.toBeNull();
+  });
+
+  it('should render children', async () => {
+    expect(screen.getByText('AppBar Children')).not.toBeNull();
+  });
+
+  it('should open drawer and render option labels', async () => {
+    const uiStore = unitContainer.get<UIStoreType>(TYPES.UIStore);
+
+    uiStore.appBar.setPages([
+      {
+        label: 'Home',
+        link: '/',
+        Icon: Dashboard,
+      },
+    ]);
+
+    uiStore.appBar.toggleDrawer();
+
+    expect(screen.getByText('Home')).not.toBeNull();
+
+    expect(uiStore.appBar.isDrawerOpen).toBeTruthy();
+  });
+
+  it('should render AppBar header', async () => {
+    const uiStore = unitContainer.get<UIStoreType>(TYPES.UIStore);
+
+    uiStore.appBar.setAppBarHeaderContent('AppHeader Header');
+
+    expect(screen.getByText(/AppHeader Header/g)).not.toBeNull();
+  });
+
+  it('should render drawer header', async () => {
+    const uiStore = unitContainer.get<UIStoreType>(TYPES.UIStore);
+
+    uiStore.appBar.setDrawerHeaderContent('Drawer Header');
+
+    uiStore.appBar.toggleDrawer();
+
+    expect(screen.getByText(/Drawer Header/g)).not.toBeNull();
+  });
+});

src/components/AppBar/DrawerItem.tsx

@@ -0,0 +1,79 @@
+import { ExpandLess, ExpandMore } from '@mui/icons-material';
+import { ListItemButton } from '@mui/material';
+import Collapse from '@mui/material/Collapse';
+import List from '@mui/material/List';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import { useUIStore } from '../../index';
+import { Fragment, useState } from 'react';
+import { Page } from './types';
+import { observer } from 'mobx-react-lite';
+
+interface DrawerItemProps {
+  page: Page;
+}
+
+const DrawerItem = ({ page }: DrawerItemProps) => {
+  const [expanded, setExpanded] = useState(false);
+  const uiStore = useUIStore();
+
+  const handleClick = (page: Page) => {
+    return () => {
+      if (!!page.sub) {
+        setExpanded(!expanded);
+        return;
+      }
+      uiStore.appBar.onClickDrawerOption(page);
+    };
+  };
+
+  return (
+    <Fragment key={page.link}>
+      <ListItemButton
+        key={page.link}
+        sx={{ minHeight: 48, pl: 2.5 }}
+        onClick={handleClick(page)}
+      >
+        <ListItemIcon
+          sx={{
+            minWidth: uiStore.appBar.isDrawerOpen ? 48 : 0,
+          }}
+        >
+          <page.Icon />
+        </ListItemIcon>
+        <ListItemText
+          hidden={!uiStore.appBar.isDrawerOpen}
+          primary={page.label}
+        />
+        {!!page.sub && uiStore.appBar.isDrawerOpen ? (
+          expanded ? (
+            <ExpandLess />
+          ) : (
+            <ExpandMore />
+          )
+        ) : null}
+      </ListItemButton>
+      <Collapse
+        in={uiStore.appBar.isDrawerOpen && expanded}
+        timeout="auto"
+        unmountOnExit
+      >
+        <List component="div" disablePadding>
+          {page.sub?.map((subPage) => (
+            <ListItemButton sx={{ pl: 4 }} key={subPage.link}>
+              <ListItemIcon>
+                <subPage.Icon />
+              </ListItemIcon>
+              <ListItemText
+                hidden={!uiStore.appBar.isDrawerOpen}
+                primary={subPage.label}
+              />
+            </ListItemButton>
+          ))}
+        </List>
+      </Collapse>
+    </Fragment>
+  );
+};
+
+export default observer(DrawerItem);