From 2844a2bd71dcf1eb17a53992c10129b7496332e0 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Tue, 31 Oct 2023 17:41:43 +0100 Subject: feat(components): add an Overlay component * add useScrollbarWidth hook * add useScrollLock hook * add a new component to lock scroll with an overlay (it can be useful especially on small screens to prevent background contents to be scrolled) --- src/components/atoms/index.ts | 1 + src/components/atoms/overlay/index.ts | 1 + src/components/atoms/overlay/overlay.module.scss | 18 +++++++ src/components/atoms/overlay/overlay.stories.tsx | 63 ++++++++++++++++++++++ src/components/atoms/overlay/overlay.test.tsx | 21 ++++++++ src/components/atoms/overlay/overlay.tsx | 47 ++++++++++++++++ src/utils/hooks/index.ts | 2 + src/utils/hooks/use-scroll-lock/index.ts | 1 + .../hooks/use-scroll-lock/use-scroll-lock.test.tsx | 25 +++++++++ src/utils/hooks/use-scroll-lock/use-scroll-lock.ts | 58 ++++++++++++++++++++ src/utils/hooks/use-scrollbar-width/index.ts | 1 + .../use-scrollbar-width.test.ts | 12 +++++ .../use-scrollbar-width/use-scrollbar-width.ts | 42 +++++++++++++++ 13 files changed, 292 insertions(+) create mode 100644 src/components/atoms/overlay/index.ts create mode 100644 src/components/atoms/overlay/overlay.module.scss create mode 100644 src/components/atoms/overlay/overlay.stories.tsx create mode 100644 src/components/atoms/overlay/overlay.test.tsx create mode 100644 src/components/atoms/overlay/overlay.tsx create mode 100644 src/utils/hooks/use-scroll-lock/index.ts create mode 100644 src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx create mode 100644 src/utils/hooks/use-scroll-lock/use-scroll-lock.ts create mode 100644 src/utils/hooks/use-scrollbar-width/index.ts create mode 100644 src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts create mode 100644 src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts (limited to 'src') diff --git a/src/components/atoms/index.ts b/src/components/atoms/index.ts index 9791e66..54d8d29 100644 --- a/src/components/atoms/index.ts +++ b/src/components/atoms/index.ts @@ -9,5 +9,6 @@ export * from './links'; export * from './lists'; export * from './loaders'; export * from './notice'; +export * from './overlay'; export * from './sidebar'; export * from './visually-hidden'; diff --git a/src/components/atoms/overlay/index.ts b/src/components/atoms/overlay/index.ts new file mode 100644 index 0000000..40adbf0 --- /dev/null +++ b/src/components/atoms/overlay/index.ts @@ -0,0 +1 @@ +export * from './overlay'; diff --git a/src/components/atoms/overlay/overlay.module.scss b/src/components/atoms/overlay/overlay.module.scss new file mode 100644 index 0000000..edbc4ae --- /dev/null +++ b/src/components/atoms/overlay/overlay.module.scss @@ -0,0 +1,18 @@ +.overlay { + position: fixed; + inset: 0; + z-index: 100; + background: hsla(0, 0%, 0%, 0.6); + transition: all 0.3s linear 0s; + + &--hidden { + opacity: 0; + overflow: hidden; + visibility: hidden; + } + + &--visible { + opacity: 1; + visibility: visible; + } +} diff --git a/src/components/atoms/overlay/overlay.stories.tsx b/src/components/atoms/overlay/overlay.stories.tsx new file mode 100644 index 0000000..f9c478c --- /dev/null +++ b/src/components/atoms/overlay/overlay.stories.tsx @@ -0,0 +1,63 @@ +import type { ComponentMeta, ComponentStory } from '@storybook/react'; +import { useToggle } from '../../../utils/hooks'; +import { Button } from '../buttons'; +import { Overlay } from './overlay'; + +/** + * Overlay - Storybook Meta + */ +export default { + title: 'Atoms/Overlay', + component: Overlay, + argTypes: {}, +} as ComponentMeta; + +const Template: ComponentStory = ({ isVisible, ...props }) => { + const [isActive, toggle] = useToggle(isVisible); + + return ( +
+

+ Itaque reprehenderit sint rerum placeat et sapiente similique ut + distinctio. Libero illo reprehenderit qui quaerat dolorem. Officiis + asperiores sapiente eaque. Aut numquam porro quasi delectus excepturi + aut eaque et. Commodi et necessitatibus provident blanditiis rem qui + atque. +

+

+ Aut architecto vitae dolor hic explicabo iure quia quae beatae. + Exercitationem nulla dignissimos doloribus sunt at nisi. A modi quasi + est sed quas repellendus vel sed dolores. Sed neque aperiam adipisci eos + autem. Libero omnis quis aut quas omnis magni harum et. +

+ + +
+ ); +}; + +/** + * Overlay Stories - Hidden + */ +export const Hidden = Template.bind({}); +Hidden.args = { + children: ( +
+ Some modal contents. +
+ ), + isVisible: false, +}; + +/** + * Overlay Stories - Visible + */ +export const Visible = Template.bind({}); +Visible.args = { + children: ( +
+ Some modal contents. +
+ ), + isVisible: true, +}; diff --git a/src/components/atoms/overlay/overlay.test.tsx b/src/components/atoms/overlay/overlay.test.tsx new file mode 100644 index 0000000..fcc694f --- /dev/null +++ b/src/components/atoms/overlay/overlay.test.tsx @@ -0,0 +1,21 @@ +import { describe, expect, it } from '@jest/globals'; +import { render, screen as screenTL } from '@testing-library/react'; +import { Overlay } from './overlay'; + +describe('overlay', () => { + it('renders its children in front of an overlay', () => { + const body = 'perferendis voluptatibus ut'; + + render({body}); + + expect(screenTL.getByText(body)).toHaveClass('overlay--visible'); + }); + + it('can be hidden', () => { + const body = 'vel aspernatur mollitia'; + + render({body}); + + expect(screenTL.getByText(body)).toHaveClass('overlay--hidden'); + }); +}); diff --git a/src/components/atoms/overlay/overlay.tsx b/src/components/atoms/overlay/overlay.tsx new file mode 100644 index 0000000..7dd7446 --- /dev/null +++ b/src/components/atoms/overlay/overlay.tsx @@ -0,0 +1,47 @@ +import { + forwardRef, + type ForwardRefRenderFunction, + type HTMLAttributes, + type ReactNode, +} from 'react'; +import { useScrollLock } from '../../../utils/hooks'; +import styles from './overlay.module.scss'; + +export type OverlayProps = HTMLAttributes & { + /** + * The elements to display in front of the overlay. + */ + children: ReactNode; + /** + * Should the overlay be visible? + * + * Use it if you want an animated overlay instead of mounting/demounting it. + * + * @default true + */ + isVisible?: boolean; +}; + +const OverlayWithRef: ForwardRefRenderFunction = ( + { children, className = '', isVisible = true, ...props }, + ref +) => { + const overlayClass = [ + styles.overlay, + styles[isVisible ? 'overlay--visible' : 'overlay--hidden'], + className, + ].join(' '); + + useScrollLock(isVisible); + + return ( +
+ {children} +
+ ); +}; + +/** + * Overlay component. + */ +export const Overlay = forwardRef(OverlayWithRef); diff --git a/src/utils/hooks/index.ts b/src/utils/hooks/index.ts index b98be04..3e8b410 100644 --- a/src/utils/hooks/index.ts +++ b/src/utils/hooks/index.ts @@ -19,7 +19,9 @@ export * from './use-reading-time'; export * from './use-redirection'; export * from './use-reduced-motion'; export * from './use-route-change'; +export * from './use-scroll-lock'; export * from './use-scroll-position'; +export * from './use-scrollbar-width'; export * from './use-settings'; export * from './use-state-change'; export * from './use-system-color-scheme'; diff --git a/src/utils/hooks/use-scroll-lock/index.ts b/src/utils/hooks/use-scroll-lock/index.ts new file mode 100644 index 0000000..f5735c7 --- /dev/null +++ b/src/utils/hooks/use-scroll-lock/index.ts @@ -0,0 +1 @@ +export * from './use-scroll-lock'; diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx new file mode 100644 index 0000000..f8234e1 --- /dev/null +++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.test.tsx @@ -0,0 +1,25 @@ +import { describe, expect, it } from '@jest/globals'; +import { render } from '@testing-library/react'; +import { useScrollLock } from './use-scroll-lock'; + +const body = 'eligendi dolor eos'; + +const UseScrollLockDemo = ({ isLocked }: { isLocked: boolean }) => { + useScrollLock(isLocked); + + return
{body}
; +}; + +describe('use-scroll-lock', () => { + it('can disable scroll on body element', () => { + const { baseElement } = render(); + + expect(baseElement).toHaveStyle({ overflow: 'hidden' }); + }); + + it('can enable scroll on body element', () => { + const { baseElement } = render(); + + expect(baseElement).not.toHaveStyle({ overflow: 'hidden' }); + }); +}); diff --git a/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts new file mode 100644 index 0000000..64fc5e8 --- /dev/null +++ b/src/utils/hooks/use-scroll-lock/use-scroll-lock.ts @@ -0,0 +1,58 @@ +import { useCallback, useEffect, useRef, useMemo } from 'react'; +import { useScrollBarWidth } from '../use-scrollbar-width'; + +type Styles = { + overflow: string; + paddingRight: string; +}; + +/** + * React hook to lock/unlock the scroll on the body. + * + * @param {boolean} [isScrollLocked] - Should the scroll be locked? + */ +export const useScrollLock = (isScrollLocked = false) => { + const scrollbarWidth = useScrollBarWidth(); + const initialStyles = useRef(null); + const lockedStyles: Styles = useMemo(() => { + return { + overflow: 'hidden', + paddingRight: `calc(${ + initialStyles.current?.paddingRight ?? 0 + } + ${scrollbarWidth}px)`, + }; + }, [scrollbarWidth]); + + useEffect(() => { + const computedStyle = + typeof window === 'undefined' + ? undefined + : window.getComputedStyle(document.body); + + initialStyles.current = { + overflow: computedStyle?.overflow ?? '', + paddingRight: computedStyle?.paddingRight ?? '', + }; + }, []); + + const lockScroll = useCallback(() => { + document.body.style.overflow = lockedStyles.overflow; + document.body.style.paddingRight = lockedStyles.paddingRight; + }, [lockedStyles]); + + const unlockScroll = useCallback(() => { + document.body.style.overflow = initialStyles.current?.overflow ?? ''; + document.body.style.paddingRight = + initialStyles.current?.paddingRight ?? ''; + }, []); + + useEffect(() => { + if (typeof window === 'undefined') return undefined; + + if (isScrollLocked) lockScroll(); + + return () => { + unlockScroll(); + }; + }, [isScrollLocked, lockScroll, unlockScroll]); +}; diff --git a/src/utils/hooks/use-scrollbar-width/index.ts b/src/utils/hooks/use-scrollbar-width/index.ts new file mode 100644 index 0000000..932c9bd --- /dev/null +++ b/src/utils/hooks/use-scrollbar-width/index.ts @@ -0,0 +1 @@ +export * from './use-scrollbar-width'; diff --git a/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts new file mode 100644 index 0000000..04148be --- /dev/null +++ b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.test.ts @@ -0,0 +1,12 @@ +import { describe, expect, it } from '@jest/globals'; +import { renderHook } from '@testing-library/react'; +import { useScrollBarWidth } from './use-scrollbar-width'; + +describe('useScrollbarWidth', () => { + it('returns the scrollbar width', () => { + const { result } = renderHook(() => useScrollBarWidth()); + + // JSdom always return 0 for measurements. + expect(result.current).toBe(0); + }); +}); diff --git a/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts new file mode 100644 index 0000000..19bfebc --- /dev/null +++ b/src/utils/hooks/use-scrollbar-width/use-scrollbar-width.ts @@ -0,0 +1,42 @@ +import { useCallback, useEffect, useState } from 'react'; + +/** + * Retrieve the scrollbar width of the window. + * + * @returns {number} The scrollbar width. + */ +export const getScrollbarWidth = (): number => { + const defaultWidth = 15; + + if (typeof window === 'undefined') return defaultWidth; + + return window.document.body.clientWidth + ? window.innerWidth - window.document.body.clientWidth + : 0; +}; + +/** + * React hook to retrieve the current scrollbar width of the window. + * + * @returns {number} The scrollbar width. + */ +export const useScrollBarWidth = (): number => { + const [scrollbarWidth, setScrollbarWidth] = useState(0); + + const updateScrollbarWidth = useCallback(() => { + setScrollbarWidth(getScrollbarWidth()); + }, []); + + useEffect(() => { + updateScrollbarWidth(); + window.addEventListener('resize', updateScrollbarWidth); + window.addEventListener('orientationchange', updateScrollbarWidth); + + return () => { + window.removeEventListener('resize', updateScrollbarWidth); + window.removeEventListener('orientationchange', updateScrollbarWidth); + }; + }, [updateScrollbarWidth]); + + return scrollbarWidth; +}; -- cgit v1.2.3