[TKAI-3469] feat: refactor horizontal menu

.storybook/preview.tsx

@@ -1,101 +1,8 @@
-import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-styling';
-import { rem } from 'polished';
-import { typography, colors } from '../src/ions/variables';
-import { device } from '../src/ions/breakpoints';
-
-/* TODO: update import for your custom theme configurations */
-// import { lightTheme, darkTheme } from '../path/to/themes';
-
-/* TODO: replace with your own global styles, or remove */
-const GlobalStyles = createGlobalStyle`
-    * {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-size: 16px;
-    scroll-behavior: smooth;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'Space Grotesk', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 1rem;
-    font-weight: ${typography.regular};
-    color: ${colors.black};
-    font-feature-settings: 'ss04' on;
-    -webkit-font-smoothing: antialiased;
-  }
-
-  h1,
-  h1 span,
-  h2,
-  h2 span {
-    margin: 0;
-    font-weight: ${typography.regular};
-  }
-
-  h1,
-  h1 span {
-    font-family: 'Laforgestencil', Verdana, Arial, Helvetica, sans-serif;
-    font-size: 3.5rem;
-    line-height: 1.15;
-  }
-
-  h2,
-  h2 span {
-    font-size: 2rem;
-    line-height: 1.2;
-  }
-
-  h3,
-  h4 {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 400;
-  }
-
-  span {
-    font-family: ${typography.defaultFont};
-    font-size: ${rem(typography.defaultSize)};
-    font-feature-settings: 'ss04' on;
-  }
-
-  p {
-    margin: 0;
-    font-size: 1rem;
-    line-height: 1.3;
-
-    &:not(:last-child) {
-      margin-bottom: ${rem('10px')};
-    }
-  }
-
-  pre {
-    border: 1px solid ${colors.grey500};
-    border-radius: 4px;
-    background-color: ${colors.grey300};
-    padding: ${rem('15px')};
-  }
-
-  @media ${device.l} {
-    h1,
-    h1 span {
-      font-size: 6rem;
-      line-height: 1.1;
-    }
-
-    h2,
-    h2 span {
-      font-size: 2.5rem;
-    }
-  }
-`;
+import '../src/styles/global.css';
 
 const preview = {
   actions: { argTypesRegex: '^on.*' },
-
   backgrounds: {
     default: 'light',
     values: [
@@ -120,7 +27,6 @@ const preview = {
       // }
       // defaultTheme: 'light',
       // Provider: ThemeProvider,
-      GlobalStyles,
     }),
   ],
 };

package.json

@@ -67,18 +67,19 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
     "@size-limit/preset-small-lib": "^11.0.1",
-    "@storybook/addon-a11y": "^7.6.4",
-    "@storybook/addon-controls": "^7.6.4",
-    "@storybook/addon-essentials": "^7.6.4",
-    "@storybook/addon-links": "^7.6.4",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-controls": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/addons": "^7.6.4",
-    "@storybook/react": "^7.6.4",
-    "@storybook/react-webpack5": "^7.6.4",
-    "@storybook/theming": "^7.6.4",
+    "@storybook/addons": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
+    "@storybook/theming": "^7.6.7",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.2",
     "@testing-library/user-event": "^13.0.7",
+    "@types/css-modules": "^1.0.5",
     "@types/lodash.throttle": "^4.1.6",
     "@types/react": "^17.0.3",
     "@types/react-beautiful-dnd": "^13.1.1",
@@ -105,8 +106,9 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-is": "^17.0.1",
+    "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^11.0.1",
-    "storybook": "^7.6.4",
+    "storybook": "^7.6.7",
     "tsdx": "^0.14.1",
     "tslib": "^2.0.3",
     "typescript": "^4.2.3",
@@ -126,6 +128,7 @@
     "lodash.throttle": "^4.1.1",
     "polished": "^4.1.1",
     "react-beautiful-dnd": "^13.1.0",
+    "react-intersection-observer": "^9.5.3",
     "react-paginate": "^7.1.3",
     "react-player": "^2.9.0",
     "react-responsive-carousel": "^3.2.18",

src/organisms/horizontal-nav/index.tsx

@@ -1,92 +1,96 @@
-import React, { useState, useRef, useEffect } from 'react';
-import * as Styles from './styles';
-import useVisible from '../../utils/hooks/use-visible';
-import { Button } from '../..';
-
-export interface HorizontalNavInterface {
-  className?: string;
-  customColor?: string;
-  items: any;
-  startsOpen?: boolean;
-}
-
-const HorizontalNav = (props: HorizontalNavInterface) => {
-  const [showMore, setShowMore] = useState(false);
-  const moreMenu = useRef(null);
-  const visibleMenuRef = useRef<HTMLUListElement>(null);
-
-  const {
-    className = 'horizontal-nav',
-    customColor = '',
-    items,
-    startsOpen = false,
-  } = props;
-
-  const { ref, isVisible, setIsVisible } =
-    useVisible<HTMLDivElement>(startsOpen);
-
-  useEffect(() => {
-    if (!ref || !ref.current) return;
-
-    const visible = document!
-      .querySelector('ul.menu')!
-      .getElementsByTagName('li');
-
-    const more = document.querySelector('.more')!.getElementsByTagName('li');
-    const moreVisibility = () =>
-      more.length > 0 ? setShowMore(true) : setShowMore(false);
-
-    const removeItem = () => {
-      if (visible.length === 1) return;
-      let last = visible[visible.length - 1];
-      document.querySelector('ul.more')!.prepend(last);
-    };
+import { useState } from 'react';
+import { InView } from 'react-intersection-observer';
+import { Button, Icon } from '../..';
+import { HorizontalNavInterface, ItemInterface } from './types';
+import styles from './styles.module.css';
+
+function scroll(
+  container: HTMLElement | null,
+  direction: string,
+  speed: number | undefined,
+  distance: number,
+  step: number
+) {
+  let scrollAmount = 0;
+  const slideTimer = setInterval(function () {
+    if (container && direction === 'left') {
+      container.scrollLeft -= step;
+    } else {
+      container ? (container.scrollLeft += step) : null;
+    }
 
-    const addItem = () => {
-      if (more.length === 0) return;
-      let first = more[0];
-      document.querySelector('ul.menu')!.append(first);
-    };
+    scrollAmount += step;
 
-    const checkOverflow = () => {
-      moreVisibility();
-      for (let i = 0; i < visible.length + 20; i++) {
-        visibleMenuRef.current!.scrollWidth + 50 > ref.current!.offsetWidth
-          ? removeItem()
-          : addItem();
-      }
-    };
+    if (scrollAmount >= distance) {
+      window.clearInterval(slideTimer);
+    }
+  }, speed);
+}
 
-    checkOverflow();
+export default function HorizontalNav(props: HorizontalNavInterface) {
+  const { id = 'horizontal-nav', items } = props;
+  const [showBackButton, setShowBackButton] = useState(false);
+  const [showForwardButton, setShowForwardButton] = useState(true);
 
-    if (typeof window !== 'undefined') {
-      moreVisibility();
-      window.addEventListener('resize', checkOverflow);
-      return () => window.removeEventListener('resize', checkOverflow);
-    }
+  const forward = () => {
+    const container = document.getElementById(id);
+    scroll(container, 'right', 10, 200, 10);
+  };
 
-    return;
-  }, [ref]);
+  const back = () => {
+    const container = document.getElementById(id);
+    scroll(container, 'left', 10, 200, 10);
+  };
 
   return (
-    <Styles.Wrapper ref={ref} className={className} customColor={customColor}>
-      <ul className="menu" ref={visibleMenuRef}>
-        {items}
-      </ul>
-
-      <Styles.More className={showMore ? 'hide' : ''} ref={moreMenu}>
+    <div className={styles.wrapper}>
+      {showBackButton && (
         <Button
-          variant="text"
-          color="dark"
-          icon="menuVert"
-          action={() => {
-            setIsVisible(!isVisible);
-          }}
+          className={styles.back}
+          variant="solid"
+          color="white"
+          txtColor="black"
+          icon="caret-left"
+          action={back}
         />
-        <ul className={isVisible ? 'more is-open' : 'more'}></ul>
-      </Styles.More>
-    </Styles.Wrapper>
+      )}
+      <div id={id}>
+        <ul className="menu">
+          {items.map((item: ItemInterface, index: number) => (
+            // @ts-ignore
+            <InView
+              key={index}
+              as="li"
+              className={item.active ? styles.active : undefined}
+              threshold={1}
+              onChange={inView => {
+                if (index === 0 && inView) setShowBackButton(false);
+                if (index === 0 && !inView) setShowBackButton(true);
+                if (index === items.length - 1 && inView)
+                  setShowForwardButton(false);
+                if (index === items.length - 1 && !inView)
+                  setShowForwardButton(true);
+              }}
+            >
+              <a href={item.url}>
+                {item.icon && <Icon icon={item.icon} />}
+                {item.label}
+              </a>
+            </InView>
+            // </li>
+          ))}
+        </ul>
+      </div>
+      {showForwardButton && (
+        <Button
+          className={styles.forward}
+          variant="solid"
+          color="white"
+          txtColor="black"
+          icon="caret-right"
+          action={forward}
+        />
+      )}
+    </div>
   );
-};
-
-export default HorizontalNav;
+}

src/organisms/horizontal-nav/stories/horizontal-nav.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import HorizontalNav, { HorizontalNavInterface } from '..';
-import { Icon } from '../../..';
+import HorizontalNav from '..';
+import { HorizontalNavInterface } from '../types';
 
 export default {
   title: 'Components/Organisms/Navigation',
@@ -69,22 +69,13 @@ const menu = [
   },
 ];
 
-const items = menu.map((item, index) => (
-  <li key={index} className={item.active ? 'active' : undefined}>
-    <a href={item.url}>
-      {item.icon && <Icon icon={item.icon} />}
-      {item.label}
-    </a>
-  </li>
-));
-
 export const HorizontalNavComponent = (args: HorizontalNavInterface) => {
   return <HorizontalNav {...args} />;
 };
 
 HorizontalNavComponent.storyName = 'Horizontal Nav';
 
 HorizontalNavComponent.args = {
-  items: items,
+  items: menu,
   startsOpen: false,
 };