add sidebar

package.json

@@ -73,6 +73,7 @@
     "gatsby-source-filesystem": "^2.1.9",
     "gatsby-transformer-remark": "^2.6.14",
     "gatsby-transformer-sharp": "^2.2.6",
+    "mui-layout": "^1.2.9",
     "prism-react-renderer": "^0.1.7",
     "prismjs": "^1.17.1",
     "react": "^16.9.0",
@@ -99,6 +100,10 @@
     "@storybook/addon-notes": "^5.1.11",
     "@storybook/addons": "^5.1.11",
     "@storybook/react": "^5.1.11",
+    "@testing-library/dom": "^6.10.0",
+    "@testing-library/jest-dom": "^4.2.3",
+    "@testing-library/react": "^9.3.1",
+    "@types/jest": "^24.0.21",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.0.2",
     "babel-jest": "^24.9.0",

packages/mui-layout/src/__tests__/context.test.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import LayoutContext from '../layoutContext';
+
+describe('context', () => {
+  test('Layout Context has correct default schema', () => {
+    const { getByText } = render(
+      <LayoutContext.Consumer>
+        {value => {
+          console.log('value', value);
+          return <span>Received: {value}</span>;
+        }}
+      </LayoutContext.Consumer>
+    );
+    expect(getByText(/^Received:/).textContent).toBe('Received: value');
+  });
+});

packages/mui-layout/src/__tests__/sidebar.test.js

@@ -0,0 +1,143 @@
+import React from 'react';
+import { ThemeProvider } from '@material-ui/styles';
+import { createMuiTheme } from '@material-ui/core/styles';
+import { render, fireEvent } from '@testing-library/react';
+import { LayoutProvider, LayoutConsumer } from '../layoutContext';
+import Sidebar from '../components/Sidebar';
+import CollapseBtn from '../components/CollapseBtn';
+
+const baseTheme = createMuiTheme();
+
+describe('Sidebar', function() {
+  let sidebarRoot;
+  let sidebarPaper;
+  let trigger;
+  let backdrop;
+  let renderLayout;
+  beforeEach(() => {
+    renderLayout = (elm, config) =>
+      render(
+        <ThemeProvider theme={baseTheme}>
+          <LayoutProvider config={config}>{elm}</LayoutProvider>
+        </ThemeProvider>
+      );
+  });
+  test('[Permanent] should always display on screen', () => {
+    const { getByTestId } = renderLayout(
+      <Sidebar data-testid={'sidebar-root'} />,
+      { sidebar: { variant: 'permanent' } }
+    );
+    sidebarRoot = getByTestId('sidebar-root');
+    expect(sidebarRoot).toBeInTheDocument();
+  });
+
+  test('[Persistent] should show & hide on screen when triggered', () => {
+    const { getByTestId } = renderLayout(
+      <Sidebar
+        data-testid={'sidebar-root'}
+        PaperProps={{ 'data-testid': 'sidebar-paper' }}
+      >
+        {({ setOpened, opened }) => (
+          <button data-testid={'trigger'} onClick={() => setOpened(!opened)} />
+        )}
+      </Sidebar>,
+      { sidebar: { variant: 'persistent' } }
+    );
+    sidebarPaper = getByTestId('sidebar-paper');
+    expect(sidebarPaper.style.visibility).toBe('hidden');
+    trigger = getByTestId('trigger');
+    fireEvent.click(trigger);
+    expect(sidebarPaper.style.visibility).toBe('');
+  });
+
+  test('[Temporary] should appear in dom when opened', () => {
+    const { queryByTestId, getByTestId } = renderLayout(
+      <>
+        <Sidebar
+          data-testid={'sidebar-root'}
+          ModalProps={{ BackdropProps: { 'data-testid': 'backdrop' } }}
+        />
+        <LayoutConsumer>
+          {({ setOpened, opened }) => (
+            <button
+              data-testid={'trigger'}
+              onClick={() => setOpened(!opened)}
+            />
+          )}
+        </LayoutConsumer>
+      </>,
+      { sidebar: { variant: 'temporary' } }
+    );
+    sidebarRoot = queryByTestId('sidebar-root');
+    expect(sidebarRoot).toBeNull();
+
+    trigger = getByTestId('trigger');
+    fireEvent.click(trigger);
+    sidebarRoot = queryByTestId('sidebar-root');
+    expect(sidebarRoot).not.toBeNull();
+
+    backdrop = getByTestId('backdrop');
+    fireEvent.click(backdrop);
+    sidebarRoot = queryByTestId('sidebar-root');
+    expect(sidebarRoot.getAttribute('aria-hidden')).toBe('true');
+  });
+
+  test("Sidebar's width is set by config", () => {
+    const width = 256;
+    const { getByTestId } = renderLayout(
+      <Sidebar PaperProps={{ 'data-testid': 'sidebar-paper' }} />,
+      {
+        sidebar: {
+          variant: 'permanent',
+          width,
+        },
+      }
+    );
+    sidebarPaper = getByTestId('sidebar-paper');
+    expect(sidebarPaper.style.width).toEqual(`${width}px`);
+  });
+
+  test('Sidebar can be collapsed to some width', () => {
+    const collapsedWidth = 80;
+    const { getByTestId } = renderLayout(
+      <Sidebar PaperProps={{ 'data-testid': 'sidebar-paper' }}>
+        {({ setCollapsed }) => (
+          <button data-testid={'trigger'} onClick={() => setCollapsed(true)} />
+        )}
+      </Sidebar>,
+      {
+        sidebar: {
+          variant: 'permanent',
+          width: 256,
+          collapsible: true,
+          collapsedWidth,
+        },
+      }
+    );
+    trigger = getByTestId('trigger');
+    fireEvent.click(trigger);
+    sidebarPaper = getByTestId('sidebar-paper');
+    expect(sidebarPaper.style.width).toEqual(`${collapsedWidth}px`);
+  });
+
+  test('Collapsible Side + Trigger should work', () => {
+    const collapsedWidth = 80;
+    const { getByTestId } = renderLayout(
+      <Sidebar PaperProps={{ 'data-testid': 'sidebar-paper' }}>
+        <CollapseBtn data-testid={'trigger'}>toggle</CollapseBtn>
+      </Sidebar>,
+      {
+        sidebar: {
+          variant: 'permanent',
+          width: 256,
+          collapsible: true,
+          collapsedWidth,
+        },
+      }
+    );
+    trigger = getByTestId('trigger');
+    fireEvent.click(trigger);
+    sidebarPaper = getByTestId('sidebar-paper');
+    expect(sidebarPaper.style.width).toEqual(`${collapsedWidth}px`);
+  });
+});

packages/mui-layout/src/components/CollapseBtn.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { useConfig } from '../layoutContext';
+
+const CollapseBtn = ({ onClick, ...props }) => {
+  const { setCollapsed, collapsed } = useConfig();
+  return (
+    <Button
+      onClick={e => {
+        onClick(e);
+        setCollapsed(!collapsed);
+      }}
+      {...props}
+    />
+  );
+};
+
+CollapseBtn.propTypes = {
+  onClick: PropTypes.func,
+};
+CollapseBtn.defaultProps = {
+  onClick: () => {},
+};
+
+export default CollapseBtn;