add sidePanel component (#188)

src/components/SidePanel/SidePanel.stories.tsx

@@ -0,0 +1,26 @@
+import { SidePanel } from './SidePanel';
+
+export default { title: 'Components/SidePanel' };
+
+export const _SidePanelLeft = {
+  render: () => (
+    <SidePanel
+      onOpen={() => console.log('opened')}
+      onClose={() => console.log('closed')}
+    >
+      <div className="flex h-full items-center">That's a side panel</div>
+    </SidePanel>
+  ),
+};
+
+export const _SidePanelRight = {
+  render: () => (
+    <SidePanel
+      side="left"
+      onOpen={() => console.log('opened')}
+      onClose={() => console.log('closed')}
+    >
+      <div className="flex h-full items-center">That's a side panel</div>
+    </SidePanel>
+  ),
+};

src/components/SidePanel/SidePanel.test.tsx

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { SidePanel } from '.';
+
+describe('Components | SidePanel', () => {
+  test('it should render', () => {
+    render(<SidePanel />);
+
+    let sidePanel = screen.getByTestId('side-panel');
+
+    expect(sidePanel).toBeInTheDocument();
+  });
+});

src/components/SidePanel/SidePanel.tsx

@@ -0,0 +1,60 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import React from 'react';
+
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  ChangeEvent,
+  useState,
+} from 'react';
+import { FiMenu } from 'react-icons/fi';
+
+export interface SidePanelProps extends ComponentPropsWithoutRef<'div'> {
+  side?: 'left' | 'right';
+  customClass?: string;
+  children?: ReactNode;
+  onOpen?: () => void;
+  onClose?: () => void;
+}
+
+export function SidePanel({ ...props }) {
+  const {
+    side = 'right',
+    children,
+    onClose,
+    onOpen,
+    customClass,
+    ...rest
+  } = props;
+  const [toggle, setToggle] = useState(false);
+
+  const isRight = side === 'right';
+
+  console.log(isRight);
+
+  const sideClass = isRight ? 'right-0' : 'left-0';
+  const toggleClass = toggle ? 'w-[450px]' : 'w-10';
+  const iconClass = isRight ? 'flex-row' : 'flex-row-reverse';
+
+  function toggleDropdown(e: ChangeEvent<unknown>) {
+    setToggle(!toggle);
+
+    toggle ? onClose?.(e) : onOpen?.(e);
+  }
+
+  return (
+    <div
+      data-testid="side-panel"
+      className={`fixed top-0 ${sideClass} ${toggleClass} h-screen bg-secondary ${customClass}`}
+      {...rest}
+    >
+      <div className={`flex ${iconClass} h-full`}>
+        <button onClick={toggleDropdown} className="p-2 flex items-center">
+          <FiMenu className="h-6 w-6" />
+        </button>
+        <div className="flex">{toggle ? children : null}</div>
+      </div>
+    </div>
+  );
+}

src/components/SidePanel/index.ts

@@ -0,0 +1 @@
+export * from './SidePanel';