@coldsurf/ocean-road 1.13.2

package/src/next/app-header/app-header.styled.ts

@@ -0,0 +1,160 @@
+import { Text } from '@/base';
+import { AnimatedHeader } from '@/extensions/app-header/app-header';
+import { semantics } from '@/tokens';
+import { media } from '@/utils';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { motion } from 'framer-motion';
+import { X as CloseIcon, Menu } from 'lucide-react';
+import { GlobalLink } from '../global-link';
+
+export const StyledFloatingHeader = styled(AnimatedHeader)`
+  padding-left: 96px;
+  padding-right: 96px;
+  padding-top: 48px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  ${media['xx-large'](css`
+    padding-left: 48px;
+    padding-right: 48px;
+    padding-top: 48px;
+  `)}
+  ${media['x-large'](css`
+    padding-left: 24px;
+    padding-right: 24px;
+    padding-top: 16px;
+  `)}
+    ${media.large(css`
+    padding-left: 16px;
+    padding-right: 16px;
+    padding-top: 16px;
+  `)};
+`;
+
+export const StyledFloatingHeaderInner = styled.div`
+  max-width: 1728px;
+  width: 100%;
+  background-color: ${semantics.color.background[3]};
+  border-radius: 10000px;
+  z-index: 2;
+
+  height: 78px;
+
+  display: flex;
+  align-items: center;
+
+  padding: 12px;
+
+  ${media.large(css`
+    max-width: 1536px;
+  `)}
+
+  ${media.medium(css`
+    max-width: none;
+    width: 100%;
+  `)}
+`;
+
+export const StyledFloatingHeaderLogoWrapper = styled(GlobalLink)`
+  padding-left: 32px;
+  margin-right: 48px;
+  display: flex;
+  align-items: center;
+
+  ${media.large(css`
+    padding-left: 18px;
+    margin-right: 0;
+  `)}
+
+  ${media.small(css`
+    padding-left: 0;
+  `)}
+`;
+
+export const StyledFloatingHeaderAppLogoText = styled(Text)`
+  display: block;
+  font-size: 24px;
+  font-weight: bold;
+  margin: unset;
+  color: ${semantics.color.foreground[3]};
+  ${media.large(css`
+    display: none;
+  `)}
+`;
+
+export const StyledFloatingHeaderMenuContainer = styled.div`
+  display: block;
+  display: flex;
+  align-items: center;
+  ${media.large(css`
+    display: none;
+  `)}
+`;
+
+export const StyledFloatingHeaderColorSchemeToggleContainer = styled.div`
+  margin-left: auto;
+
+  ${media.large(css`
+    display: none;
+  `)}
+`;
+
+export const StyledFloatingHeaderCloseDrawerButton = styled.button<{ $isOpen: boolean }>`
+  display: none;
+  background: ${(props) => (props.$isOpen ? semantics.color.background[1] : semantics.color.background[3])};
+  ${media['x-large'](css`
+    display: block;
+    margin-left: auto;
+    cursor: pointer;
+
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    min-width: 42px;
+    min-height: 42px;
+    border-radius: 50%;
+  `)}
+
+  ${media.small(css`
+    margin-right: 0px;
+  `)}
+`;
+
+export const StyledFloatingHeaderOpenDrawerMenu = styled(Menu)`
+  display: none;
+  ${media.large(css`
+    display: block;
+    color: ${semantics.color.foreground[3]};
+  `)}
+`;
+
+export const StyledFloatingHeaderCloseDrawerIcon = styled(CloseIcon)`
+  display: none;
+  ${media['x-large'](css`
+    display: block;
+    color: ${semantics.color.foreground[3]};
+  `)}
+`;
+
+export const StyledFullScreenMobileMenuBackground = styled(motion.div)<{ $standalone?: boolean }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+  background-color: ${semantics.color.background[4]};
+  display: flex;
+  flex-direction: column;
+  z-index: 98;
+
+  padding-top: ${({ $standalone }) => ($standalone ? '26px' : '126px')};
+  padding-left: 16px;
+  padding-right: 16px;
+
+  overflow-y: auto;
+`;

package/src/next/app-header/app-header.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import { AppLogo } from '@/extensions';
+import type { AnimatedHeaderProps } from '@/extensions/app-header/app-header';
+import {
+  useHeaderScrollAnimation,
+  useIsMobileMenuOpen,
+} from '@/extensions/app-header/app-header.hooks';
+import styled from '@emotion/styled';
+import { type ReactNode, memo, useCallback } from 'react';
+import {
+  StyledFloatingHeader,
+  StyledFloatingHeaderAppLogoText,
+  StyledFloatingHeaderCloseDrawerButton,
+  StyledFloatingHeaderCloseDrawerIcon,
+  StyledFloatingHeaderColorSchemeToggleContainer,
+  StyledFloatingHeaderInner,
+  StyledFloatingHeaderLogoWrapper,
+  StyledFloatingHeaderMenuContainer,
+  StyledFloatingHeaderOpenDrawerMenu,
+} from './app-header.styled';
+
+const StyledFloatingHeaderAppLogo = styled(AppLogo)`
+  border-radius: 50%;
+  margin-right: 20px;
+  width: 48px;
+  height: 48px;
+`;
+
+type FloatingHeaderProps = {
+  serviceName: string;
+  HeaderMenuItemComponent: ReactNode;
+  ColorSchemeToggleComponent: ReactNode;
+  onClickOpenMobileDrawer?: (params: { isMobileMenuOpen: boolean }) => void;
+  className?: string;
+  zIndex?: AnimatedHeaderProps['zIndex'];
+};
+
+export const FloatingHeader = memo(
+  ({
+    serviceName,
+    HeaderMenuItemComponent,
+    ColorSchemeToggleComponent,
+    onClickOpenMobileDrawer,
+    className,
+    zIndex,
+  }: FloatingHeaderProps) => {
+    const { headerAnimation } = useHeaderScrollAnimation();
+    const { isMobileMenuOpen, openMobileMenu, closeMobileMenu } = useIsMobileMenuOpen();
+
+    const handleClickOpenDrawer = useCallback(() => {
+      onClickOpenMobileDrawer?.({
+        isMobileMenuOpen,
+      });
+      if (isMobileMenuOpen) {
+        closeMobileMenu();
+      } else {
+        openMobileMenu();
+      }
+    }, [closeMobileMenu, isMobileMenuOpen, onClickOpenMobileDrawer, openMobileMenu]);
+
+    return (
+      <StyledFloatingHeader animation={headerAnimation} className={className} zIndex={zIndex}>
+        <StyledFloatingHeaderInner>
+          <StyledFloatingHeaderLogoWrapper href="/">
+            <StyledFloatingHeaderAppLogo type="round" logoTheme="white-background" />
+            <StyledFloatingHeaderAppLogoText as="h2">{serviceName}</StyledFloatingHeaderAppLogoText>
+          </StyledFloatingHeaderLogoWrapper>
+          <StyledFloatingHeaderMenuContainer>
+            {HeaderMenuItemComponent}
+          </StyledFloatingHeaderMenuContainer>
+          <StyledFloatingHeaderColorSchemeToggleContainer>
+            {ColorSchemeToggleComponent}
+          </StyledFloatingHeaderColorSchemeToggleContainer>
+          <StyledFloatingHeaderCloseDrawerButton
+            $isOpen={isMobileMenuOpen}
+            onClick={handleClickOpenDrawer}
+          >
+            {isMobileMenuOpen ? (
+              <StyledFloatingHeaderCloseDrawerIcon />
+            ) : (
+              <StyledFloatingHeaderOpenDrawerMenu />
+            )}
+          </StyledFloatingHeaderCloseDrawerButton>
+        </StyledFloatingHeaderInner>
+      </StyledFloatingHeader>
+    );
+  }
+);
+
+FloatingHeader.displayName = 'AppHeader.FloatingHeader';

package/src/next/app-header/index.ts

@@ -0,0 +1,13 @@
+import { AppHeader as AppHeaderDefault } from '@/extensions';
+import { FloatingHeader } from './app-header';
+import { FixedHeader } from './app-header.fixed-header';
+import { FullScreenMobileAccordionDrawer } from './app-header.full-screen-mobile-accordion-drawer';
+import { ModalMobileAccordionDrawer } from './app-header.modal-mobile-accordion-drawer';
+
+export const AppHeader = {
+  ...AppHeaderDefault,
+  FloatingHeader,
+  FixedHeader,
+  FullScreenMobileAccordionDrawer,
+  ModalMobileAccordionDrawer,
+};

package/src/next/global-link/global-link.store.ts

@@ -0,0 +1,41 @@
+import { useSyncExternalStore } from 'react';
+
+type LinkStoreState = {
+  isLoading: boolean;
+};
+
+type Listener = () => void;
+
+let state: LinkStoreState = {
+  isLoading: false,
+};
+
+const listeners = new Set<Listener>();
+
+const linkStore = {
+  getSnapshot: () => state,
+
+  subscribe: (listener: Listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+
+  setIsLoading: (isLoading: boolean) => {
+    if (state.isLoading === isLoading) return;
+    state = { ...state, isLoading };
+    listeners.forEach((l) => l());
+  },
+};
+
+export function useLinkStore() {
+  const state = useSyncExternalStore(
+    linkStore.subscribe,
+    linkStore.getSnapshot,
+    linkStore.getSnapshot // SSR fallback
+  );
+
+  return {
+    isLoading: state.isLoading,
+    setIsLoading: linkStore.setIsLoading,
+  };
+}

package/src/next/global-link/global-link.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { fullyDecodePathname } from '@coldsurfers/shared-utils';
+import Link, { type LinkProps } from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  type AnchorHTMLAttributes,
+  type MouseEventHandler,
+  type PointerEventHandler,
+  type PropsWithChildren,
+  useCallback,
+} from 'react';
+import { useLinkStore } from './global-link.store';
+import { getRedirectHref } from './global-link.utils';
+
+export function GlobalLink({
+  children,
+  href,
+  onClick,
+  target,
+  ...otherProps
+}: PropsWithChildren<LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>>) {
+  const pathname = usePathname();
+  const { setIsLoading } = useLinkStore();
+  const handleClick = useCallback<MouseEventHandler<HTMLAnchorElement>>(
+    (e) => {
+      const to = getRedirectHref(href);
+      const from = fullyDecodePathname(pathname);
+      if (!target && to !== from) {
+        setIsLoading(true);
+      }
+      onClick?.(e);
+    },
+    [onClick, pathname, setIsLoading, target, href]
+  );
+  const onPointerDown = useCallback<PointerEventHandler<HTMLAnchorElement>>((e) => {
+    e.preventDefault();
+  }, []);
+
+  return (
+    <Link
+      href={href}
+      target={target}
+      onClick={handleClick}
+      {...otherProps}
+      // or draggable={false}
+      onPointerDown={onPointerDown}
+    >
+      {children}
+    </Link>
+  );
+}

package/src/next/global-link/global-link.utils.ts

@@ -0,0 +1,9 @@
+let redirectMap: Record<string, string> = {};
+
+export function initializeGlobalLinkRedirectMap(map: Record<string, string>) {
+  redirectMap = map;
+}
+
+export function getRedirectHref(href: string) {
+  return redirectMap[href] ?? href;
+}

package/src/next/global-link/index.ts

@@ -0,0 +1,3 @@
+export * from './global-link';
+export * from './global-link.store';
+export { initializeGlobalLinkRedirectMap } from './global-link.utils';

package/src/next/grid-card-item/grid-card-item.masonry.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import {
+  type GridCardListItemProps,
+  MasonryGridCardItem as MasonryGridCardItemUI,
+} from '@/extensions/grid-card-item';
+import { memo } from 'react';
+import { GlobalLink } from '../global-link';
+
+export const MasonryGridCardItem = memo(
+  ({ href, onClick, ...gridCardListItemProps }: GridCardListItemProps) => {
+    if (!href) {
+      return <MasonryGridCardItemUI onClick={onClick} {...gridCardListItemProps} />;
+    }
+    return (
+      <GlobalLink href={href} onClick={onClick}>
+        <MasonryGridCardItemUI {...gridCardListItemProps} />
+      </GlobalLink>
+    );
+  }
+);
+
+MasonryGridCardItem.displayName = 'GridCardList.MasonryItem';

package/src/next/grid-card-item/grid-card-item.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import {
+  GridCardItem as GridCardItemUI,
+  type GridCardListItemProps,
+} from '@/extensions/grid-card-item';
+import { memo } from 'react';
+import { GlobalLink } from '../global-link';
+
+export const GridCardItem = memo(
+  ({ href, onClick, ...gridCardListItemProps }: GridCardListItemProps) => {
+    if (!href) {
+      return <GridCardItemUI onClick={onClick} {...gridCardListItemProps} />;
+    }
+    return (
+      <GlobalLink href={href} onClick={onClick}>
+        <GridCardItemUI {...gridCardListItemProps} />
+      </GlobalLink>
+    );
+  }
+);
+
+GridCardItem.displayName = 'GridCardList.Item';

package/src/next/grid-card-item/index.ts

@@ -0,0 +1,2 @@
+export * from './grid-card-item';
+export * from './grid-card-item.masonry';

package/src/next/index.ts

@@ -0,0 +1,16 @@
+'use client';
+
+import { GridCardList as DefaultGridCardList } from '@/extensions';
+import { GridCardItem, MasonryGridCardItem } from './grid-card-item';
+
+export const GridCardList = {
+  ...DefaultGridCardList,
+  Item: GridCardItem,
+  MasonryItem: MasonryGridCardItem,
+};
+
+export * from './global-link';
+export * from './route-loading';
+export * from './new-tab-link';
+export * from './app-footer';
+export * from './app-header';

package/src/next/new-tab-link/index.ts

@@ -0,0 +1 @@
+export * from './new-tab-link';

package/src/next/new-tab-link/new-tab-link.tsx

@@ -0,0 +1,15 @@
+import type { LinkProps } from 'next/link';
+import Link from 'next/link';
+import { type PropsWithChildren, memo } from 'react';
+
+export const NewTabLink = memo(
+  ({ children, ...linkProps }: PropsWithChildren<Omit<LinkProps, 'target' | 'rel'>>) => {
+    return (
+      <Link target="_blank" rel="noopener noreferrer" {...linkProps}>
+        {children}
+      </Link>
+    );
+  }
+);
+
+NewTabLink.displayName = 'NewTabLink';

package/src/next/route-loading/index.ts

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

package/src/next/route-loading/route-loading.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { Spinner } from '@/base';
+import { type DependencyList, type PropsWithChildren, Suspense, useLayoutEffect } from 'react';
+import { useLinkStore } from '../global-link';
+
+export function RouteLoading({ children, deps }: PropsWithChildren<{ deps?: DependencyList }>) {
+  const { setIsLoading, isLoading } = useLinkStore();
+
+  useLayoutEffect(() => {
+    setIsLoading(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setIsLoading, ...(deps ?? [])]);
+
+  return (
+    <Suspense fallback={<Spinner variant="page-overlay" />}>
+      {children}
+      {isLoading && <Spinner variant="page-overlay" />}
+    </Suspense>
+  );
+}

package/src/tokens/index.ts

@@ -0,0 +1,2 @@
+export * from './tokens';
+export * from './tokens.types';

package/src/tokens/tokens.ts

@@ -0,0 +1,8 @@
+import colorDesignTokens from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+import themeVariablesDesignTokens from '@coldsurfers/ocean-road-design-tokens/js/semantic/theme-variables';
+import semanticDesignTokens from '@coldsurfers/ocean-road-design-tokens/js/semantic/variables';
+import type { ColorDesignTokens } from './tokens.types';
+
+export const colors: ColorDesignTokens = colorDesignTokens;
+export const semantics = semanticDesignTokens;
+export const semanticVariables = themeVariablesDesignTokens;

package/src/tokens/tokens.types.ts

@@ -0,0 +1,7 @@
+import type darkColorDesignTokens from '@coldsurfers/ocean-road-design-tokens/dist/json/color/variables-dark.json';
+import type lightColorDesignTokens from '@coldsurfers/ocean-road-design-tokens/dist/json/color/variables-light.json';
+import type colorDesignTokens from '@coldsurfers/ocean-road-design-tokens/js/color/variables';
+
+export type ColorDesignTokens = typeof colorDesignTokens;
+export type DarkColorDesignTokens = typeof darkColorDesignTokens;
+export type LightColorDesignTokens = typeof lightColorDesignTokens;

package/src/utils/breakpoints.ts

@@ -0,0 +1,9 @@
+const breakpoints = {
+  small: 576,
+  medium: 768,
+  large: 992,
+  'x-large': 1280,
+  'xx-large': 1460,
+} as const;
+
+export default breakpoints;

package/src/utils/common-styles.ts

@@ -0,0 +1,23 @@
+import { css } from '@emotion/react';
+import media from './media';
+
+type Edge = 'left' | 'right';
+
+export const commonHorizontalLayoutCss = (edges: readonly Edge[]) => {
+  return media['xx-large'](css`
+          ${edges.includes('left') && 'padding-left: 0.75rem;'}
+          ${edges.includes('right') && 'padding-right: 0.75rem;'}
+      `);
+};
+
+export const commonWebkitScrollHideCss = () => {
+  return css`
+    scroll-behavior: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+    -webkit-scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  `;
+};

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as breakpoints } from './breakpoints';
+export { default as media } from './media';

package/src/utils/media.ts

@@ -0,0 +1,23 @@
+import { type SerializedStyles, css } from '@emotion/react';
+import breakpoints from './breakpoints';
+
+type BreakpointKey = keyof typeof breakpoints;
+
+// Define a type-safe media query utility
+const media: Record<BreakpointKey, (styles: SerializedStyles | string) => SerializedStyles> =
+  Object.keys(breakpoints).reduce(
+    (acc, label) => {
+      const breakpointLabel = label as BreakpointKey;
+
+      acc[breakpointLabel] = (styles) => css`
+      @media (max-width: ${breakpoints[breakpointLabel]}px) {
+        ${styles}
+      }
+    `;
+
+      return acc;
+    },
+    {} as Record<BreakpointKey, (styles: SerializedStyles | string) => SerializedStyles>
+  );
+
+export default media;

package/src/utils/use-prevent-scroll-effect.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react';
+
+export const usePreventScrollEffect = ({
+  shouldPrevent,
+}: {
+  shouldPrevent: boolean;
+}) => {
+  useEffect(() => {
+    const { body } = document;
+    if (shouldPrevent) {
+      body.style.overflow = 'hidden'; // Disable scrolling
+    } else {
+      body.style.overflow = ''; // Reset overflow to enable scrolling
+    }
+    return () => {
+      body.style.overflow = ''; // Clean up on unmount
+    };
+  }, [shouldPrevent]);
+};

package/src/utils/with-id.ts

@@ -0,0 +1,3 @@
+export type WithId<T> = {
+  id: string;
+} & T;

package/src/utils/with-stop-propagation.ts

@@ -0,0 +1,10 @@
+import type { SyntheticEvent } from 'react';
+
+export const withStopPropagation = <T extends SyntheticEvent>(handler?: (event: T) => void) => {
+  return (event: T) => {
+    event.stopPropagation();
+    event.preventDefault();
+
+    handler?.(event);
+  };
+};