@os-design/core 1.0.199 → 1.0.200

package/src/Navigation/index.tsx

@@ -0,0 +1,214 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+
+import { enableScrollingStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useRef } from 'react';
+
+import useScrollFlags from './utils/useScrollFlags';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface NavigationProps extends JsxDivProps {
+  /**
+   * The top component in the side navigator.
+   * E.g. the user avatar.
+   * @default undefined
+   */
+  sideTop?: React.ReactNode;
+  /**
+   * The bottom component in the side navigator.
+   * E.g. the current tariff.
+   * @default undefined
+   */
+  sideBottom?: React.ReactNode;
+}
+
+const Container = styled.div`
+  position: fixed;
+  box-sizing: border-box;
+  z-index: 101;
+
+  background-color: ${(p) => clr(p.theme.navigationColorBg)};
+  color: ${(p) => clr(p.theme.navigationColorText)};
+
+  // Tab navigator
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: calc(
+    ${(p) => p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)
+  );
+  border-top: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};
+
+  // Side navigator
+  ${m.min.md} {
+    // Reset tab navigator styles
+    right: unset;
+    height: unset;
+    border-top: unset;
+
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: ${(p) => p.theme.navigationSideWidth}em;
+    border-right: 1px solid ${(p) => clr(p.theme.navigationColorBorder)};
+  }
+`;
+
+const notHasSideTopStyles = (p) =>
+  !p.hasSideTop &&
+  css`
+    padding-top: ${p.theme.pageHeaderHeight[1]}em;
+  `;
+
+const hasPrevStyles = (p) =>
+  p.hasPrev &&
+  !p.hasNext &&
+  css`
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      white ${p.theme.navigationMaskImageSize}em
+    );
+    ${m.min.md} {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        white ${p.theme.navigationMaskImageSize}em
+      );
+    }
+  `;
+
+const hasNextStyles = (p) =>
+  !p.hasPrev &&
+  p.hasNext &&
+  css`
+    mask-image: linear-gradient(
+      to left,
+      transparent,
+      white ${p.theme.navigationMaskImageSize}em
+    );
+    ${m.min.md} {
+      mask-image: linear-gradient(
+        to top,
+        transparent,
+        white ${p.theme.navigationMaskImageSize}em
+      );
+    }
+  `;
+
+const hasPrevNextStyles = (p) =>
+  p.hasPrev &&
+  p.hasNext &&
+  css`
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      white ${p.theme.navigationMaskImageSize}em,
+      white calc(100% - ${p.theme.navigationMaskImageSize}em),
+      transparent
+    );
+    ${m.min.md} {
+      mask-image: linear-gradient(
+        to bottom,
+        transparent,
+        white ${p.theme.navigationMaskImageSize}em,
+        white calc(100% - ${p.theme.navigationMaskImageSize}em),
+        transparent
+      );
+    }
+  `;
+
+interface ContentProps {
+  hasSideTop: boolean;
+  hasPrev: boolean;
+  hasNext: boolean;
+}
+const Content = styled(
+  'div',
+  omitEmotionProps('hasSideTop', 'hasPrev', 'hasNext')
+)<ContentProps>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-start;
+  &::before,
+  &::after {
+    content: ''; // Insert space before the first item and after the last one
+  }
+
+  overflow-y: hidden;
+  ${enableScrollingStyles('x', false)};
+
+  ${m.min.md} {
+    // Reset tab navigator styles
+    justify-content: unset;
+    align-items: unset;
+
+    flex-direction: column;
+
+    overflow-x: hidden;
+    ${enableScrollingStyles('y', false)};
+
+    ${notHasSideTopStyles};
+  }
+
+  ${hasPrevStyles};
+  ${hasNextStyles};
+  ${hasPrevNextStyles};
+`;
+
+const Addon = styled.div`
+  display: none;
+  ${m.min.md} {
+    display: block;
+  }
+`;
+
+const BottomAddon = styled(Addon)`
+  margin-top: auto;
+`;
+
+/**
+ * The main navigation.
+ */
+const Navigation = forwardRef<HTMLDivElement, NavigationProps>(
+  ({ sideTop, sideBottom, children, ...rest }, ref) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const { hasPrev, hasNext } = useScrollFlags(contentRef);
+
+    return (
+      <Container
+        role='navigation'
+        aria-label='Main navigation'
+        {...rest}
+        ref={ref}
+      >
+        <Content
+          hasSideTop={!!sideTop}
+          hasPrev={hasPrev}
+          hasNext={hasNext}
+          ref={contentRef}
+          role='list'
+        >
+          {sideTop && <Addon>{sideTop}</Addon>}
+          {children}
+          {sideBottom && <BottomAddon>{sideBottom}</BottomAddon>}
+        </Content>
+      </Container>
+    );
+  }
+);
+
+Navigation.displayName = 'Navigation';
+
+export default Navigation;

package/src/Navigation/utils/useScrollFlags.ts

@@ -0,0 +1,39 @@
+import { useIsMinWidth } from '@os-design/media';
+import { useBrowserLayoutEffect, useEvent } from '@os-design/utils';
+import { RefObject, useCallback, useState } from 'react';
+
+interface UseScrollFlagsRes {
+  hasPrev: boolean;
+  hasNext: boolean;
+}
+
+const useScrollFlags = (ref: RefObject<Element>): UseScrollFlagsRes => {
+  const [hasPrev, setHasPrev] = useState(false);
+  const [hasNext, setHasNext] = useState(false);
+  const isMinMd = useIsMinWidth('md');
+
+  const scrollHandler = useCallback(() => {
+    const { current } = ref;
+    if (!current) return;
+
+    setHasPrev(current[isMinMd ? 'scrollTop' : 'scrollLeft'] > 0);
+    setHasNext(
+      current[isMinMd ? 'scrollHeight' : 'scrollWidth'] -
+        current[isMinMd ? 'scrollTop' : 'scrollLeft'] -
+        current[isMinMd ? 'clientHeight' : 'clientWidth'] >
+        0
+    );
+  }, [ref, isMinMd]);
+
+  useBrowserLayoutEffect(() => scrollHandler(), [scrollHandler]);
+  useEvent(ref, 'scroll', scrollHandler);
+  useEvent(
+    (typeof window !== 'undefined' ? window : undefined) as EventTarget,
+    'resize',
+    scrollHandler
+  );
+
+  return { hasPrev, hasNext };
+};
+
+export default useScrollFlags;

package/src/NavigationItem/index.tsx

@@ -0,0 +1,136 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+import { resetFocusStyles, transitionStyles } from '@os-design/styles';
+import { clr } from '@os-design/theming';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef } from 'react';
+import { LinkProps, ReactRouterLinkProps } from '../Link';
+
+type JsxAProps = Omit<JSX.IntrinsicElements['a'], 'ref'>;
+export interface NavigationItemProps
+  extends JsxAProps,
+    ReactRouterLinkProps,
+    Pick<LinkProps, 'as'> {
+  /**
+   * The icon of the item.
+   * @default undefined
+   */
+  icon: React.ReactElement;
+  /**
+   * Whether the item is the current page.
+   * @default false
+   */
+  currentPage?: boolean;
+}
+
+const currentPageStyles = (p) =>
+  p.currentPage &&
+  css`
+    background-color: ${clr(p.theme.navigationItemColorBgActive)};
+    color: ${clr(p.theme.navigationItemColorTextActive)};
+  `;
+
+type NavigationLinkProps = Pick<NavigationItemProps, 'currentPage'>;
+const NavigationLink = styled(
+  'a',
+  omitEmotionProps('currentPage', 'as')
+)<NavigationLinkProps>`
+  ${resetFocusStyles};
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+  border-radius: ${(p) => p.theme.borderRadius}em;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  color: ${(p) => clr(p.theme.navigationItemColorText)};
+  @media (hover: hover) {
+    &:hover,
+    &:focus {
+      background-color: ${(p) => clr(p.theme.navigationItemColorBgHover)};
+    }
+  }
+
+  // Tab navigator
+  width: ${(p) => p.theme.navigationItemTabWidth}em;
+  min-width: ${(p) => p.theme.navigationItemTabWidth}em;
+  height: calc(${(p) => p.theme.navigationTabHeight}em - 1px);
+
+  // Side navigator
+  ${m.min.md} {
+    // Reset tab navigator styles
+    min-width: unset;
+
+    width: 100%;
+    height: ${(p) => p.theme.navigationItemSideHeight}em;
+    min-height: ${(p) => p.theme.navigationItemSideHeight}em;
+  }
+
+  ${currentPageStyles};
+  ${transitionStyles('background-color', 'color')};
+`;
+
+const IconContainer = styled.span`
+  display: inherit;
+
+  // Tab navigator
+  font-size: 1.6em;
+
+  // Side navigator
+  ${m.min.md} {
+    font-size: 1.8em;
+  }
+`;
+
+const Title = styled.span`
+  font-size: 0.75em;
+  font-weight: 500;
+  white-space: nowrap;
+
+  // Side navigator
+  ${m.min.md} {
+    margin-top: 0.3em;
+  }
+`;
+
+/**
+ * The item of the navigation.
+ */
+const NavigationItem = forwardRef<HTMLAnchorElement, NavigationItemProps>(
+  (
+    {
+      icon,
+      currentPage = false,
+      as,
+      onMouseDown = () => {},
+      children,
+      ...rest
+    },
+    ref
+  ) => (
+    <div role='listitem'>
+      <NavigationLink
+        currentPage={currentPage}
+        as={as}
+        onMouseDown={(e) => {
+          onMouseDown(e);
+          e.preventDefault();
+        }}
+        aria-current={currentPage ? 'page' : undefined}
+        {...rest}
+        ref={ref}
+      >
+        <IconContainer>{icon}</IconContainer>
+        {children && <Title>{children}</Title>}
+      </NavigationLink>
+    </div>
+  )
+);
+
+NavigationItem.displayName = 'NavigationItem';
+
+export default NavigationItem;

package/src/PageContent/index.tsx

@@ -0,0 +1,99 @@
+import { css } from '@emotion/react';
+
+import styled from '@emotion/styled';
+import { m } from '@os-design/media';
+
+import { horizontalPaddingStyles } from '@os-design/styles';
+import { omitEmotionProps } from '@os-design/utils';
+import React, { forwardRef, useContext } from 'react';
+
+import LayoutContext from '../Layout/LayoutContext';
+
+type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'ref'>;
+export interface PageContentProps extends JsxDivProps {
+  /**
+   * Whether there is the list in the page content.
+   * @default false
+   */
+  hasList?: boolean;
+}
+
+const hasNavigationStyles = (p) =>
+  p.hasNavigation &&
+  css`
+    ${!p.hasList &&
+    css`
+      margin-bottom: calc(
+        ${p.theme.navigationTabHeight}em + env(safe-area-inset-bottom)
+      );
+    `}
+    ${m.min.md} {
+      margin-bottom: 0;
+      margin-left: ${p.theme.navigationSideWidth}em;
+    }
+  `;
+
+const hasPageHeaderStyles = (p) =>
+  p.hasPageHeader &&
+  !p.hasList &&
+  css`
+    margin-top: ${p.theme.pageHeaderHeight[0]}em;
+    ${m.min.md} {
+      margin-top: ${p.theme.pageHeaderHeight[1]}em;
+    }
+  `;
+
+const notHasListStyles = (p) =>
+  !p.hasList &&
+  css`
+    padding-top: ${p.theme.pageContentPaddingVertical}em;
+    padding-bottom: ${p.theme.pageContentPaddingVertical}em;
+    ${horizontalPaddingStyles()(p)};
+  `;
+
+const notHasNavigationStyles = (p) =>
+  !p.hasNavigation &&
+  !p.hasList &&
+  css`
+    margin-bottom: env(safe-area-inset-bottom);
+  `;
+
+interface ContainerProps {
+  hasNavigation?: boolean;
+  hasPageHeader?: boolean;
+  hasList?: boolean;
+}
+const Container = styled(
+  'main',
+  omitEmotionProps('hasNavigation', 'hasPageHeader', 'hasList')
+)<ContainerProps>`
+  ${hasNavigationStyles};
+  ${hasPageHeaderStyles};
+  ${notHasListStyles};
+  ${notHasNavigationStyles};
+`;
+
+/**
+ * The wrapper that adds padding to the page content.
+ */
+const PageContent = forwardRef<HTMLElement, PageContentProps>(
+  ({ hasList = false, children, ...rest }, ref) => {
+    const { hasNavigation, hasPageHeader } = useContext(LayoutContext);
+
+    return (
+      <Container
+        hasNavigation={hasNavigation}
+        hasPageHeader={hasPageHeader}
+        hasList={hasList}
+        {...rest}
+        ref={ref}
+      >
+        {children}
+      </Container>
+    );
+  }
+);
+
+PageContent.displayName = 'PageContent';
+
+export default PageContent;