feat(design-system): redesign tab-view around quick nav (#194)

* feat(design-system): redesign tab-view around quick nav

* fix tests

packages/design-system/atoms/breakpoints/BreakpointProvider.tsx

@@ -28,6 +28,10 @@ export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
     Object.entries(this.mediaQueries).forEach(([key, mediaQuery]) =>
       mediaQuery.addEventListener('change', this.handleMediaEvent)
     );
+
+    this.handleMediaEvent();
+    setTimeout(() => this.handleMediaEvent(), 0);
+    setTimeout(() => this.handleMediaEvent(), 10);
   }
 
   componentWillUnmount() {
@@ -36,8 +40,7 @@ export class BreakpointsProvider extends React.Component<{}, ScreenSize> {
     );
   }
 
-  handleMediaEvent = (event: MediaQueryListEvent) => {
+  handleMediaEvent = () => {
-    console.log('handleMediaEvent', { event });
     this.setState({
       ...resetScreen,
       ...this.calculateScreen(),

packages/design-system/atoms/quick-nav/QuickNav.stories.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BreakpointsProvider } from '../breakpoints/BreakpointProvider';
+import { QuickNav, QuickNavCollapsed, QuickNavExpanded, QuickNavProps } from './QuickNav';
+
+export default {
+  title: 'Atoms/Quick Nav',
+  component: QuickNav,
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
+  args: {
+    navItems: ['AAAA', 'BBBB', 'CCCC'],
+    currentNavItem: 'AAAA',
+  },
+};
+
+const stateWrapper = (args: QuickNavProps, Component: typeof QuickNav) => {
+  const [currentNavItem, setCurrentNavItem] = useState(args.currentNavItem);
+  return (
+    <Component
+      {...args}
+      currentNavItem={currentNavItem}
+      onNavChange={(newNavItem) => {
+        setCurrentNavItem(newNavItem);
+        args.onNavChange(newNavItem);
+      }}
+    ></Component>
+  );
+};
+
+export const quickNav = (args) => stateWrapper(args, QuickNav);
+export const expanded = (args) => stateWrapper(args, QuickNavExpanded);
+export const collapsed = (args) => stateWrapper(args, QuickNavCollapsed);

packages/design-system/atoms/quick-nav/QuickNav.styled.ts

@@ -0,0 +1,45 @@
+import styled, { css } from 'styled-components';
+import { palette } from '../colors';
+import { transitions } from '../timings';
+
+export const NavItem = styled.div<{ selected: boolean }>`
+  padding: 7px;
+  border-radius: 2px;
+  margin-bottom: 2px;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe400};
+  }
+
+  ${(props) =>
+    props.selected &&
+    css`
+      background-color: ${palette.taupe300};
+    `}
+`;
+
+export const DropdownNavIcon = styled.div`
+  padding: 5px;
+  transition: transform ${transitions.actionable}s ease-in-out;
+  transform: translateY(2px);
+`;
+
+export const DropdownNavCurrent = styled.div`
+  padding: 5px;
+`;
+
+export const DropdownNavOpener = styled.div`
+  padding: 5px;
+  display: flex;
+  cursor: pointer;
+  border-radius: 2px;
+  transition: background-color ${transitions.actionable}s ease-in-out;
+
+  &:hover {
+    background-color: ${palette.taupe300};
+    ${DropdownNavIcon} {
+      transform: translateY(3px);
+    }
+  }
+`;

packages/design-system/atoms/quick-nav/QuickNav.tsx

@@ -0,0 +1,85 @@
+// thing should be everything visible on desktop/tablet and a popover when small
+
+import { useBreakpointContext } from '@roleypoly/design-system/atoms/breakpoints';
+import { Popover } from '@roleypoly/design-system/atoms/popover';
+import { useState } from 'react';
+import { GoChevronDown } from 'react-icons/go';
+import {
+  DropdownNavCurrent,
+  DropdownNavIcon,
+  DropdownNavOpener,
+  NavItem,
+} from './QuickNav.styled';
+
+export type QuickNavProps = {
+  navItems: string[];
+  onNavChange?: (newNavItem: string) => void;
+  currentNavItem?: string;
+};
+
+export const QuickNav = (props: QuickNavProps) => {
+  const breakpoints = useBreakpointContext();
+
+  if (breakpoints.screenSize.onSmallScreen) {
+    return <QuickNavCollapsed {...props} />;
+  }
+
+  return <QuickNavExpanded {...props} />;
+};
+
+export const QuickNavExpanded = (props: QuickNavProps) => {
+  return (
+    <div>
+      {props.navItems.map((navItem) => (
+        <NavItem
+          onClick={() => props.onNavChange?.(navItem)}
+          selected={props.currentNavItem === navItem}
+          key={navItem}
+        >
+          {navItem}
+        </NavItem>
+      ))}
+    </div>
+  );
+};
+
+export const QuickNavCollapsed = (props: QuickNavProps) => {
+  const [popoverState, setPopoverState] = useState(false);
+
+  return (
+    <div>
+      {popoverState ? (
+        <Popover
+          headContent={<>Server Editor</>}
+          position={'top left'}
+          active={popoverState}
+          onExit={() => setPopoverState(false)}
+        >
+          {() => (
+            <>
+              {props.navItems.map((navItem) => (
+                <NavItem
+                  onClick={() => {
+                    setPopoverState(false);
+                    props.onNavChange?.(navItem);
+                  }}
+                  selected={props.currentNavItem === navItem}
+                  key={navItem}
+                >
+                  {navItem}
+                </NavItem>
+              ))}
+            </>
+          )}
+        </Popover>
+      ) : (
+        <DropdownNavOpener onClick={() => setPopoverState(true)}>
+          <DropdownNavIcon>
+            <GoChevronDown />
+          </DropdownNavIcon>
+          <DropdownNavCurrent>{props.currentNavItem}</DropdownNavCurrent>
+        </DropdownNavOpener>
+      )}
+    </div>
+  );
+};

packages/design-system/atoms/quick-nav/index.ts

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

packages/design-system/atoms/tab-view/TabView.spec.tsx

@@ -1,10 +1,8 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
-import * as React from 'react';
 import { Tab, TabView, TabViewProps } from './TabView';
-import { TabContent, TabTitle } from './TabView.styled';
 
 const makeView = (props: Partial<TabViewProps> = {}) =>
-  shallow(
+  render(
     <TabView {...props}>
       <Tab title="Tab 1">{() => <div>tab 1</div>}</Tab>
       <Tab title="Tab 2">{() => <div>tab 2</div>}</Tab>,
@@ -12,28 +10,7 @@ const makeView = (props: Partial<TabViewProps> = {}) =>
   );
 
 it('renders tab content correctly', () => {
-  const view = makeView();
+  makeView();
 
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
+  expect(screen.getAllByText(/tab [1-2]/)).toHaveLength(2);
-});
-
-it('automatically picks preselected tab content', () => {
-  const view = makeView({ initialTab: 1 });
-
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
-});
-
-it('automatically uses the first tab when preselected tab is not present', () => {
-  const view = makeView({ initialTab: -1 });
-
-  view.find(TabContent).find('i').simulate('load');
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 1');
-});
-
-it('changes between tabs when tab is clicked', () => {
-  const view = makeView();
-
-  view.find(TabTitle).at(1).simulate('click');
-
-  expect(view.find(Tab).renderProp('children')().text()).toBe('tab 2');
 });

packages/design-system/atoms/tab-view/TabView.stories.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
+import { BreakpointsProvider } from '../breakpoints';
 import { Tab, TabView } from './TabView';
 
 export default {
   title: 'Atoms/Tab View',
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
   argTypes: {
     tabCount: { control: 'range', min: 1, max: 100 },
   },
@@ -16,7 +18,7 @@ export const ManyTabs = ({ tabCount }) => {
     <Tab title={`tab ${i}`}>
       {() => (
         <>
-          <h1>tab {i}</h1>
+          <p>tab {i}</p>
           <p>hello!!!!!</p>
         </>
       )}

packages/design-system/atoms/tab-view/TabView.styled.ts

@@ -1,42 +1,69 @@
-import { onTablet } from '@roleypoly/design-system/atoms/breakpoints';
-import { palette } from '@roleypoly/design-system/atoms/colors';
-import { transitions } from '@roleypoly/design-system/atoms/timings';
 import styled, { css } from 'styled-components';
+import { onSmallScreen } from '../breakpoints';
+import { palette } from '../colors';
+import { transitions } from '../timings';
+import { text500 } from '../typography';
 
-export const TabViewStyled = styled.div``;
+export const TabViewStyled = styled.div`
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+
+  ${onSmallScreen(
+    css`
+      flex-direction: column;
+    `
+  )}
+`;
 
 export const TabTitleRow = styled.div`
-  display: flex;
+  flex: 1;
-  border-bottom: 1px solid ${palette.taupe100};
+  width: 23vw;
-  overflow-x: auto;
+  position: fixed;
-  overflow-y: hidden;
+  ${onSmallScreen(
-  white-space: nowrap;
+    css`
+      position: unset;
+      max-width: 100vw;
+    `
+  )}
 `;
 
 export const TabTitle = styled.div<{ selected: boolean }>`
-  flex: 1;
+  padding: 7px;
-  text-align: center;
-  padding: 0.7em 1em;
-  border-bottom: 3px solid transparent;
-  transition: border-color ${transitions.in2out}s ease-in-out,
-    color ${transitions.in2out}s ease-in-out;
   cursor: pointer;
-  color: ${palette.taupe500};
+  transition: background-color ${transitions.actionable}s ease-in-out;
-  ${(props) =>
+  border-radius: 2px;
-    props.selected
+  margin-bottom: 5px;
-      ? css`
+
-          color: unset;
-          border-bottom-color: ${palette.taupe500};
-        `
-      : css`
   &:hover {
-            border-bottom-color: ${palette.taupe300};
+    background-color: ${palette.taupe400};
-            color: unset;
   }
-        `};
+
-  ${onTablet(css`
+  ${(props) =>
-    padding: 0.45em 1em;
+    props.selected &&
-  `)}
+    css`
+      background-color: ${palette.taupe300};
+    `}
 `;
 
-export const TabContent = styled.div``;
+export const TabContent = styled.div`
+  padding-left: 1em;
+  margin-left: 23vw;
+  flex: 1;
+
+  ${onSmallScreen(
+    css`
+      padding-left: 0;
+      margin-left: 0;
+      position: unset;
+      max-width: 100vw;
+    `
+  )}
+`;
+
+export const TabContentTitle = styled.div`
+  ${text500}
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 10px;
+`;

packages/design-system/atoms/tab-view/TabView.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { TabContent, TabTitle, TabTitleRow, TabViewStyled } from './TabView.styled';
+import { QuickNav } from '../quick-nav';
+import {
+  TabContent,
+  TabContentTitle,
+  TabTitleRow,
+  TabViewStyled,
+} from './TabView.styled';
 
 export type TabViewProps = {
   children: React.ReactNode[];
@@ -25,26 +31,40 @@ export const TabView = (props: TabViewProps) => {
   }
 
   const [currentTab, setCurrentTab] = React.useState<number>(props.initialTab ?? 0);
+  const tabRefs = tabNames.reduce<{ [name: string]: React.RefObject<HTMLDivElement> }>(
+    (acc, name) => ({ ...acc, [name]: React.createRef() }),
+    {}
+  );
 
   return (
     <TabViewStyled>
       <TabTitleRow>
-        {tabNames.map((tabName, idx) => (
+        <QuickNav
-          <TabTitle
+          currentNavItem={tabNames[currentTab]}
-            selected={currentTab === idx}
+          navItems={tabNames}
-            onClick={() => setCurrentTab(idx)}
+          onNavChange={(newTabName) => {
-            key={`tab${tabName}${idx}`}
+            setCurrentTab(tabNames.findIndex((name) => newTabName === name));
-          >
+            tabRefs[newTabName].current?.scrollIntoView({
-            {tabName}
+              behavior: 'smooth',
-          </TabTitle>
+            });
-        ))}
+          }}
+        />
       </TabTitleRow>
       <TabContent>
-        {props.children[currentTab] || (
+        {React.Children.map(props.children, (child) => {
-          <i onLoad={() => setCurrentTab(0)}>
+          if (!React.isValidElement(child)) {
-            Tabs were misconfigured, resetting to zero.
+            return null;
-          </i>
+          }
-        )}
+
+          return (
+            <div key={child.props.title}>
+              <TabContentTitle ref={tabRefs[child.props.title]}>
+                {child.props.title}
+              </TabContentTitle>
+              {child}
+            </div>
+          );
+        })}
       </TabContent>
     </TabViewStyled>
   );

packages/design-system/organisms/editor/EditorShell.stories.tsx

@@ -1,10 +1,12 @@
+import { BreakpointsProvider } from '@roleypoly/design-system/atoms/breakpoints';
+import { guildEnum } from '@roleypoly/design-system/fixtures/storyData';
 import * as React from 'react';
-import { guildEnum } from '../../fixtures/storyData';
 import { EditorShell } from './EditorShell';
 
 export default {
   title: 'Organisms/Editor',
   component: EditorShell,
+  decorators: [(story) => <BreakpointsProvider>{story()}</BreakpointsProvider>],
 };
 
-export const Shell = () => <EditorShell guild={guildEnum.guildsList[0]} />;
+export const Shell = () => <EditorShell guild={guildEnum.guilds[0]} />;

packages/design-system/organisms/editor/EditorShell.tsx

@@ -1,7 +1,6 @@
 import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view';
+import { EditorCategory } from '@roleypoly/design-system/molecules/editor-category';
 import { PresentableGuild } from '@roleypoly/types';
-import * as React from 'react';
-import { EditorCategory } from '../../molecules/editor-category';
 import { CategoryContainer } from './EditorShell.styled';
 
 type Props = {