feat(Gallery): add a hook for opening the gallery from the custom content

Author: kseniya57

src/components/Gallery/README.md

@@ -12,6 +12,7 @@ The children of the Gallery should be an array of [GalleryItem with the required
 | open             | `Boolean`                 |          |        |         | The modal opened state        |
 | onOpenChange     | `(open: boolean) => void` |          |        |         | The modal toggle handler      |
 | className        | `String`                  |          |        |         | The modal class               |
+| container        | `HTMLElement`             |          |        |         | The modal container           |
 | emptyMessage     | `String`                  |          |        | No data | No data message               |
 
 ### GalleryItem

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useGallery';
+export * from './useFilesGalleryFromContent';

src/hooks/useFilesGalleryFromContent/README.md

@@ -0,0 +1,66 @@
+## useFilesGalleryFromContent
+
+The hook for opening the gallery from html content with images and videos
+
+### PropTypes
+
+_GalleryContextProvider_:
+
+| Property     | Type                          | Required | Values | Default | Description         |
+| :----------- | :---------------------------- | :------- | :----- | :------ | :------------------ |
+| theme        | `ThemeProviderProps['theme']` |          |        | `dark`  | The gallery theme   |
+| className    | `String`                      |          |        |         | The modal class     |
+| container    | `HTMLElement`                 |          |        |         | The modal container |
+| emptyMessage | `String`                      |          |        | No data | No data message     |
+
+_useFilesGalleryFromContent_
+
+| Property    | Type                                 | Required | Values | Default | Description                                                                                                                 |
+| :---------- | :----------------------------------- | :------- | :----- | :------ | :-------------------------------------------------------------------------------------------------------------------------- |
+| customFiles | `(GalleryItem & { url?: string })[]` |          |        |         | The additional files list (pass the url to be able to exclude the items from content if they are found in the custom files) |
+
+_useFilesGalleryFromContent returns function with args_:
+
+| Property | Type                               | Required | Values | Default | Description     |
+| :------- | :--------------------------------- | :------- | :----- | :------ | :-------------- |
+| event    | `React.MouseEvent<HTMLDivElement>` | Yes      |        |         | The click event |
+
+### Usage
+
+First you should wrap your content into the GalleryContextProvider to be able to use the hook
+
+```tsx
+import {GalleryContextProvider} from '@gravity-ui/components';
+
+<GalleryContextProvider theme="dark" emptyMessage="Seems like your gallery is empty!">
+  children
+</GalleryContextProvider>;
+```
+
+Then use the hook inside your component
+
+```tsx
+import {useFilesGalleryFromContent, getGalleryItemImage} from '@gravity-ui/components';
+
+const customImages = [
+  'https://i.pinimg.com/originals/d8/bd/b4/d8bdb45a931b4265bec8e8d3f15021bf.jpg',
+  'https://i.pinimg.com/originals/c2/31/a0/c231a069c5e24099723564dae736f438.jpg',
+];
+
+const customFiles = customImages.map((image) => ({
+  url: image,
+  ...getGalleryItemImage({src: image, name: image}),
+}));
+
+const openFilesGalleryFromContent = useFilesGalleryFromContent(customFiles);
+
+<div>
+  <img
+    src="https://santreyd.ru/upload/iblock/acc/accd0c751590e792f7e43a05f22472f9.jpg"
+    alt="Corgi"
+  />
+  <a href="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
+    My video
+  </a>
+</div>;
+```

src/hooks/useFilesGalleryFromContent/__stories__/UseFilesGalleryFromContentShowcase.tsx

@@ -0,0 +1,33 @@
+import {Text} from '@gravity-ui/uikit';
+
+import {GalleryContextProvider} from '../../useGallery';
+import {useFilesGalleryFromContent} from '../useFilesGalleryFromContent';
+
+const UseFilesGalleryFromContentExample = () => {
+    const openFilesGalleryFromContent = useFilesGalleryFromContent();
+
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div onClick={openFilesGalleryFromContent}>
+            <Text variant="subheader-3" as={'h2' as const}>
+                Click image or video link to open the gallery
+            </Text>
+            <a href="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
+                My video
+            </a>
+            <br />
+            <img
+                src="https://santreyd.ru/upload/iblock/acc/accd0c751590e792f7e43a05f22472f9.jpg"
+                alt="Corgi"
+            />
+        </div>
+    );
+};
+
+export const UseFilesGalleryFromContentShowcase = () => {
+    return (
+        <GalleryContextProvider>
+            <UseFilesGalleryFromContentExample />
+        </GalleryContextProvider>
+    );
+};

src/hooks/useFilesGalleryFromContent/__stories__/useFilesGalleryFromContent.stories.tsx

@@ -0,0 +1,22 @@
+import type {Meta} from '@storybook/react';
+
+import {UseFilesGalleryFromContentShowcase} from './UseFilesGalleryFromContentShowcase';
+
+export default {
+    title: 'Hooks/useFilesGalleryFromContent',
+    parameters: {
+        a11y: {
+            element: '#storybook-root',
+            config: {
+                rules: [
+                    {
+                        id: 'color-contrast',
+                        enabled: false,
+                    },
+                ],
+            },
+        },
+    },
+} as Meta;
+
+export const Showcase = UseFilesGalleryFromContentShowcase;

src/hooks/useFilesGalleryFromContent/constants.ts

@@ -0,0 +1,7 @@
+export const supportedImageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'avif', 'bmp'];
+
+export const supportedVideoExtensions = ['mp4', 'webm', 'ogg'];
+
+export const supportedExtensions = [...supportedImageExtensions, ...supportedVideoExtensions];
+
+export const extensionRegex = /\w+?$/;

src/hooks/useFilesGalleryFromContent/index.ts

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

src/hooks/useFilesGalleryFromContent/types.ts

@@ -0,0 +1,6 @@
+import {GalleryItemProps} from '../../components';
+
+export type GalleryItemPropsWithUrl = GalleryItemProps & {
+    // pass the url to be able to exclude the items from content if they are found in the custom files
+    url?: string;
+};

src/hooks/useFilesGalleryFromContent/useFilesGalleryFromContent.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+
+import {getGalleryItemImage, getGalleryItemVideo} from '../../components';
+import {useGallery} from '../useGallery';
+
+import {extensionRegex, supportedExtensions, supportedVideoExtensions} from './constants';
+import {GalleryItemPropsWithUrl} from './types';
+
+export function useFilesGalleryFromContent(customFiles?: GalleryItemPropsWithUrl[]) {
+    const openFilesGallery = useGallery();
+
+    return React.useCallback(
+        (event: React.MouseEvent<HTMLDivElement>) => {
+            if (event.target instanceof HTMLElement) {
+                let fileLink = '';
+
+                if (event.target.tagName === 'IMG' && !event.target.closest('a')) {
+                    fileLink = event.target.getAttribute('src') ?? '';
+                } else if (event.target.tagName === 'A') {
+                    fileLink = event.target.getAttribute('href') ?? '';
+                }
+
+                if (!fileLink) {
+                    return;
+                }
+
+                const filesFromContent = [
+                    ...(event.currentTarget?.querySelectorAll('img,a') ?? []),
+                ].reduce<GalleryItemPropsWithUrl[]>((result, element) => {
+                    const isImage = element.tagName === 'IMG';
+                    const link = isImage
+                        ? element.getAttribute('src')
+                        : element.getAttribute('href');
+
+                    if (link && !customFiles?.some((item) => item.url === link)) {
+                        const extension = link.match(extensionRegex)?.[0] || '';
+
+                        if (isImage || supportedExtensions.includes(extension)) {
+                            const name =
+                                (isImage
+                                    ? element.getAttribute('alt')
+                                    : element.getAttribute('title')) || '';
+
+                            result.push({
+                                ...(supportedVideoExtensions.includes(extension)
+                                    ? getGalleryItemVideo({src: link, name: name})
+                                    : getGalleryItemImage({src: link, name: name})),
+                                url: link,
+                            });
+                        }
+                    }
+
+                    return result;
+                }, []);
+
+                const files = [...(customFiles ?? []), ...filesFromContent];
+
+                const initialItemIndex = files.findIndex((item) => item.url === fileLink);
+
+                if (initialItemIndex !== -1) {
+                    event.preventDefault();
+                    openFilesGallery(files, initialItemIndex);
+                }
+            }
+        },
+        [customFiles, openFilesGallery],
+    );
+}

src/hooks/useGallery/GalleryContext.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+import {GalleryItemProps} from '../../components';
+
+export type GalleryContextType = {
+    openGallery: (items: GalleryItemProps[], initialFileIndex?: number) => void;
+};
+
+export const GalleryContext = React.createContext<GalleryContextType>({
+    openGallery: () => {},
+});