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

CODEOWNERS

@@ -14,3 +14,4 @@
 /src/components/Stories @darkgenius
 /src/components/ConfirmDialog @kseniya57
 /src/components/Gallery @kseniya57
+/src/hooks/useGallery @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/components/Gallery/__stories__/mockData.ts

@@ -1,31 +1,36 @@
 export const images = [
-    'https://i.pinimg.com/originals/d8/bd/b4/d8bdb45a931b4265bec8e8d3f15021bf.jpg',
-    'https://i.pinimg.com/originals/c2/31/a0/c231a069c5e24099723564dae736f438.jpg',
-    'https://cs4.pikabu.ru/post_img/big/2015/02/27/6/1425024947_2006737473.jpeg',
-    'https://i.pinimg.com/originals/ef/7b/97/ef7b9724ad06cd6dfce92193e95a5caa.jpg',
-    'https://avatars.mds.yandex.net/i?id=ea31df78678a1b3f4f1fb7199090831d_l-5235412-images-thumbs&n=13',
-    'https://i.ytimg.com/vi/WA63GQpLzjA/maxresdefault.jpg',
-    'https://i.pinimg.com/originals/02/eb/fd/02ebfd63d5435ec87c7413b8b2428214.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/2b800731080995.5640a39521da5.jpg',
-    'https://pic.rutubelist.ru/video/7a/1b/7a1b88f88ff7a470ea6f8131d51c2c5c.jpg',
-    'https://i.pinimg.com/originals/4b/c7/ed/4bc7ed612f2080303644deb0f857b70f.jpg',
-    'https://img1.reactor.cc/pics/post/нейроарт-нейронные-сети-красивые-картинки-art-7821877.png',
-    'https://steamuserimages-a.akamaihd.net/ugc/841461304090603934/D3243F5856FEAE2052FC7CDB748B5BB65E6B247A/?imw=512&imh=306&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true',
-    'https://celes.club/uploads/posts/2022-06/1654752045_50-celes-club-p-multyashnii-kosmos-oboi-krasivie-53.jpg',
-    // duplicate the list to show the previews scroll
-    'https://i.pinimg.com/originals/d8/bd/b4/d8bdb45a931b4265bec8e8d3f15021bf.jpg',
-    'https://i.pinimg.com/originals/c2/31/a0/c231a069c5e24099723564dae736f438.jpg',
-    'https://cs4.pikabu.ru/post_img/big/2015/02/27/6/1425024947_2006737473.jpeg',
-    'https://i.pinimg.com/originals/ef/7b/97/ef7b9724ad06cd6dfce92193e95a5caa.jpg',
-    'https://avatars.mds.yandex.net/i?id=ea31df78678a1b3f4f1fb7199090831d_l-5235412-images-thumbs&n=13',
-    'https://i.ytimg.com/vi/WA63GQpLzjA/maxresdefault.jpg',
-    'https://i.pinimg.com/originals/02/eb/fd/02ebfd63d5435ec87c7413b8b2428214.jpg',
-    'https://mir-s3-cdn-cf.behance.net/project_modules/max_3840/2b800731080995.5640a39521da5.jpg',
-    'https://pic.rutubelist.ru/video/7a/1b/7a1b88f88ff7a470ea6f8131d51c2c5c.jpg',
-    'https://i.pinimg.com/originals/4b/c7/ed/4bc7ed612f2080303644deb0f857b70f.jpg',
-    'https://img1.reactor.cc/pics/post/нейроарт-нейронные-сети-красивые-картинки-art-7821877.png',
-    'https://steamuserimages-a.akamaihd.net/ugc/841461304090603934/D3243F5856FEAE2052FC7CDB748B5BB65E6B247A/?imw=512&imh=306&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=true',
-    'https://celes.club/uploads/posts/2022-06/1654752045_50-celes-club-p-multyashnii-kosmos-oboi-krasivie-53.jpg',
+    'https://i.pinimg.com/originals/e7/44/1a/e7441aebde7c4d5a5afc476d5fa87082.jpg',
+    'https://i.pinimg.com/736x/46/81/f0/4681f0072c3b5b8a96fdf78c4e12037c.jpg',
+    'https://i.pinimg.com/736x/ae/2a/a3/ae2aa360b9c18d0be08ef7279ab81638.jpg',
+    'https://i.pinimg.com/originals/42/b4/eb/42b4ebb23e452387a84c3ad02295003f.jpg',
+    'https://i.pinimg.com/736x/3a/e0/af/3ae0af7c666a284847d682156b8a6496.jpg',
+    'https://i.pinimg.com/736x/30/91/28/3091283eeff577749c5e3c81a9af7ce1.jpg',
+    'https://i.pinimg.com/736x/61/ce/22/61ce22263ae275efa9b9c7b02b3dea61.jpg',
+    'https://i.pinimg.com/736x/72/70/a6/7270a6d918468fcce5c297afc281bf35.jpg',
+    'https://i.pinimg.com/originals/cc/8d/cf/cc8dcfb1f6bcb54a2836019558027ef7.jpg',
+    'https://i.pinimg.com/736x/cd/74/75/cd7475dd2fa19d339e147b627896c5d4.jpg',
+    'https://i.pinimg.com/736x/aa/21/dd/aa21ddd2b3de5298953ca0762838951e.jpg',
+    'https://i.pinimg.com/originals/9c/3a/16/9c3a161254af0369c2a32bae240da2ff.jpg',
+    'https://i.pinimg.com/originals/d0/48/41/d048413c59db4dd7d1e332da991ce347.jpg',
+    'https://i.pinimg.com/736x/a9/4a/4b/a94a4b6810787f415166bc9d0bef71eb.jpg',
+    'https://i.pinimg.com/736x/9c/b2/d1/9cb2d19f5cf6bdb53b7c1f42f480db3f.jpg',
+    'https://i.pinimg.com/736x/34/94/5e/34945e08218f073f4f1d3b147108b06a.jpg',
+    'https://i.pinimg.com/originals/a6/30/93/a6309348c1dab1899d022b8759dc659b.jpg',
+    'https://i.pinimg.com/736x/69/e0/aa/69e0aac5a17f8790da23dcc379e6fd05.jpg',
+    'https://i.pinimg.com/736x/e3/f2/b4/e3f2b4f87a0ae9744a0b14c81710463c.jpg',
+    'https://i.pinimg.com/736x/f0/d4/01/f0d4011c75b92f165dbab83c8654ebf1.jpg',
+    'https://i.pinimg.com/736x/69/51/5a/69515a0da57d33b5df80d5af0c14ef7e.jpg',
+    'https://i.pinimg.com/736x/07/b6/f5/07b6f527be3860832e55e6ec041766b6.jpg',
+    'https://i.pinimg.com/originals/32/a3/30/32a33050f32ba74c2b66456d458cb792.jpg',
+    'https://i.pinimg.com/originals/07/73/12/077312668712ae5aba52766b5b3e2b8e.jpg',
+    'https://i.pinimg.com/736x/5d/15/35/5d1535227d2eb616b21113d69e5cf49b.jpg',
+    'https://i.pinimg.com/736x/12/e5/5a/12e55a138ef6345d359d9f6cf0715a5d.jpg',
+    'https://i.pinimg.com/736x/90/da/f6/90daf6e058bc377b1a3c1cf53d63bde7.jpg',
+    'https://i.pinimg.com/originals/0f/e4/66/0fe4667784f51ac62a7fbb8c84b16f2f.jpg',
+    'https://i.pinimg.com/736x/ed/11/1e/ed111e9003c2d972b7e09816deef26de.jpg',
+    'https://i.pinimg.com/736x/cf/4e/ac/cf4eac1954a1c1b4c9d43dbb8f8752a8.jpg',
+    'https://i.pinimg.com/originals/ee/50/90/ee509026a73aae62ef3ffd1860f2db5f.jpg',
+    'https://i.pinimg.com/originals/d8/a0/53/d8a0536b3855ee1cdeaaf1eb3bb71aed.jpg',
 ];
 
 export type GalleryFile =

src/hooks/index.ts

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

src/hooks/useGallery/AsyncGallery.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const AsyncGallery = React.lazy(() =>
+    import('../../components/Gallery/Gallery').then((module) => ({default: module.Gallery})),
+);

src/hooks/useGallery/GalleryContext.ts

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

src/hooks/useGallery/GalleryProvider.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+
+import {ThemeProvider} from '@gravity-ui/uikit';
+import type {ThemeProviderProps} from '@gravity-ui/uikit';
+
+import {GalleryItem} from '../../components';
+import type {GalleryItemProps, GalleryProps} from '../../components';
+
+import {AsyncGallery} from './AsyncGallery';
+import {GalleryContext} from './GalleryContext';
+import type {GalleryContextType} from './GalleryContext';
+
+export type GalleryProviderProps = React.PropsWithChildren<
+    Pick<GalleryProps, 'container' | 'className' | 'emptyMessage'>
+> &
+    Pick<ThemeProviderProps, 'theme'>;
+
+export const GalleryProvider = ({
+    children,
+    container,
+    emptyMessage,
+    theme,
+    className,
+}: GalleryProviderProps) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [{items, initialItemIndex}, setGalleryProps] = React.useState<{
+        items: GalleryItemProps[];
+        initialItemIndex: number;
+    }>({items: [], initialItemIndex: 0});
+
+    const contextValue = React.useMemo<GalleryContextType>(
+        () => ({
+            openGallery: (items, initialFileIndex) => {
+                setGalleryProps({
+                    items,
+                    initialItemIndex: initialFileIndex ?? 0,
+                });
+                setIsOpen(true);
+            },
+        }),
+        [],
+    );
+
+    return (
+        <GalleryContext.Provider value={contextValue}>
+            {children}
+            {isOpen && (
+                <React.Suspense fallback={null}>
+                    <ThemeProvider theme={theme}>
+                        <AsyncGallery
+                            open={isOpen}
+                            onOpenChange={setIsOpen}
+                            container={container}
+                            className={className}
+                            emptyMessage={emptyMessage}
+                            initialItemIndex={initialItemIndex}
+                        >
+                            {items.map((file, index) => (
+                                <GalleryItem key={index} {...file} />
+                            ))}
+                        </AsyncGallery>
+                    </ThemeProvider>
+                </React.Suspense>
+            )}
+        </GalleryContext.Provider>
+    );
+};

src/hooks/useGallery/README.md

@@ -0,0 +1,57 @@
+## useGallery
+
+The hook for opening the gallery
+
+### Usage
+
+First you should wrap your content into the GalleryProvider to be able to use the hook
+
+```tsx
+import {GalleryProvider} from '@gravity-ui/components';
+
+<GalleryProvider theme="dark" emptyMessage="Seems like your gallery is empty!">
+  children
+</GalleryProvider>;
+```
+
+Then use the hook inside your custom hooks or components
+
+```tsx
+import {useGallery, getGalleryItemImage} from '@gravity-ui/components';
+
+const {openGallery} = useGallery();
+
+const images = [
+  'https://i.pinimg.com/originals/d8/bd/b4/d8bdb45a931b4265bec8e8d3f15021bf.jpg',
+  'https://i.pinimg.com/originals/c2/31/a0/c231a069c5e24099723564dae736f438.jpg',
+];
+
+openGallery(
+  images.map((image) => getGalleryItemImage({src: image, name: image})),
+  2,
+);
+```
+
+### Properties
+
+_GalleryProvider_:
+
+| Property     | Type                          | Required | Default   | Description         |
+| :----------- | :---------------------------- | :------- | :-------- | :------------------ |
+| theme        | `ThemeProviderProps['theme']` |          |           | The gallery theme   |
+| className    | `String`                      |          |           | The modal class     |
+| container    | `HTMLElement`                 |          |           | The modal container |
+| emptyMessage | `String`                      |          | "No data" | No data message     |
+
+_useGallery hook returns_:
+
+| Property    | Type                                                       | Description                          |
+| :---------- | :--------------------------------------------------------- | :----------------------------------- |
+| openGallery | `(items: GalleryItem[], initialItemIndex: number) => void` | The function for opening the gallery |
+
+_openGallery function args_:
+
+| Property         | Type            | Required | Default | Description            |
+| :--------------- | :-------------- | :------- | :------ | :--------------------- |
+| items            | `GalleryItem[]` | Yes      |         | The gallery items      |
+| initialItemIndex | `number`        |          | 0       | The initial item index |

src/hooks/useGallery/__stories__/UseGalleryShowcase.tsx

@@ -0,0 +1,53 @@
+import {FilePreview, Text} from '@gravity-ui/uikit';
+
+import {getGalleryItemImage} from '../../../components';
+import {GalleryProvider} from '../GalleryProvider';
+import {useGallery} from '../useGallery';
+
+import {images} from './mockData';
+
+const UseGalleryExample = () => {
+    const {openGallery} = useGallery();
+
+    const handleOpen = (index: number) => {
+        openGallery(
+            images.map((image) => getGalleryItemImage({src: image, name: image})),
+            index,
+        );
+    };
+
+    return (
+        <div>
+            <Text variant="subheader-3" as={'h2' as const}>
+                Click an item to open the gallery
+            </Text>
+            <div
+                style={{
+                    display: 'grid',
+                    justifyItems: 'center',
+                    alignItems: 'center',
+                    gridTemplateColumns: 'repeat(6, 1fr)',
+                    gridGap: 8,
+                    width: 800,
+                }}
+            >
+                {images.map((image, index) => (
+                    <FilePreview
+                        onClick={() => handleOpen(index)}
+                        key={image}
+                        imageSrc={image}
+                        file={{name: `Dog ${index + 1}`, type: 'image/jpeg'} as File}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export const UseGalleryShowcase = () => {
+    return (
+        <GalleryProvider>
+            <UseGalleryExample />
+        </GalleryProvider>
+    );
+};

src/hooks/useGallery/__stories__/mockData.ts

@@ -0,0 +1,34 @@
+export const images = [
+    'https://i.pinimg.com/originals/e7/44/1a/e7441aebde7c4d5a5afc476d5fa87082.jpg',
+    'https://i.pinimg.com/736x/46/81/f0/4681f0072c3b5b8a96fdf78c4e12037c.jpg',
+    'https://i.pinimg.com/736x/ae/2a/a3/ae2aa360b9c18d0be08ef7279ab81638.jpg',
+    'https://i.pinimg.com/originals/42/b4/eb/42b4ebb23e452387a84c3ad02295003f.jpg',
+    'https://i.pinimg.com/736x/3a/e0/af/3ae0af7c666a284847d682156b8a6496.jpg',
+    'https://i.pinimg.com/736x/30/91/28/3091283eeff577749c5e3c81a9af7ce1.jpg',
+    'https://i.pinimg.com/736x/61/ce/22/61ce22263ae275efa9b9c7b02b3dea61.jpg',
+    'https://i.pinimg.com/736x/72/70/a6/7270a6d918468fcce5c297afc281bf35.jpg',
+    'https://i.pinimg.com/originals/cc/8d/cf/cc8dcfb1f6bcb54a2836019558027ef7.jpg',
+    'https://i.pinimg.com/736x/cd/74/75/cd7475dd2fa19d339e147b627896c5d4.jpg',
+    'https://i.pinimg.com/736x/aa/21/dd/aa21ddd2b3de5298953ca0762838951e.jpg',
+    'https://i.pinimg.com/originals/9c/3a/16/9c3a161254af0369c2a32bae240da2ff.jpg',
+    'https://i.pinimg.com/originals/d0/48/41/d048413c59db4dd7d1e332da991ce347.jpg',
+    'https://i.pinimg.com/736x/a9/4a/4b/a94a4b6810787f415166bc9d0bef71eb.jpg',
+    'https://i.pinimg.com/736x/9c/b2/d1/9cb2d19f5cf6bdb53b7c1f42f480db3f.jpg',
+    'https://i.pinimg.com/736x/34/94/5e/34945e08218f073f4f1d3b147108b06a.jpg',
+    'https://i.pinimg.com/originals/a6/30/93/a6309348c1dab1899d022b8759dc659b.jpg',
+    'https://i.pinimg.com/736x/69/e0/aa/69e0aac5a17f8790da23dcc379e6fd05.jpg',
+    'https://i.pinimg.com/736x/e3/f2/b4/e3f2b4f87a0ae9744a0b14c81710463c.jpg',
+    'https://i.pinimg.com/736x/f0/d4/01/f0d4011c75b92f165dbab83c8654ebf1.jpg',
+    'https://i.pinimg.com/736x/69/51/5a/69515a0da57d33b5df80d5af0c14ef7e.jpg',
+    'https://i.pinimg.com/736x/07/b6/f5/07b6f527be3860832e55e6ec041766b6.jpg',
+    'https://i.pinimg.com/originals/32/a3/30/32a33050f32ba74c2b66456d458cb792.jpg',
+    'https://i.pinimg.com/originals/07/73/12/077312668712ae5aba52766b5b3e2b8e.jpg',
+    'https://i.pinimg.com/736x/5d/15/35/5d1535227d2eb616b21113d69e5cf49b.jpg',
+    'https://i.pinimg.com/736x/12/e5/5a/12e55a138ef6345d359d9f6cf0715a5d.jpg',
+    'https://i.pinimg.com/736x/90/da/f6/90daf6e058bc377b1a3c1cf53d63bde7.jpg',
+    'https://i.pinimg.com/originals/0f/e4/66/0fe4667784f51ac62a7fbb8c84b16f2f.jpg',
+    'https://i.pinimg.com/736x/ed/11/1e/ed111e9003c2d972b7e09816deef26de.jpg',
+    'https://i.pinimg.com/736x/cf/4e/ac/cf4eac1954a1c1b4c9d43dbb8f8752a8.jpg',
+    'https://i.pinimg.com/originals/ee/50/90/ee509026a73aae62ef3ffd1860f2db5f.jpg',
+    'https://i.pinimg.com/originals/d8/a0/53/d8a0536b3855ee1cdeaaf1eb3bb71aed.jpg',
+];

src/hooks/useGallery/__stories__/useGallery.stories.tsx

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

src/hooks/useGallery/index.ts

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

src/hooks/useGallery/useGallery.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import {GalleryContext} from './GalleryContext';
+
+export function useGallery() {
+    return React.useContext(GalleryContext);
+}