feat(YfmHtml): add a hook for opening files gallery

Author: kseniya57

demo/stories/view/gallery/Gallery.stories.tsx

@@ -0,0 +1,17 @@
+import transform from '@diplodoc/transform';
+import type {StoryObj} from '@storybook/react';
+
+import {ViewWithGallery} from './ViewWithGallery';
+import {galleryMarkup} from './markup';
+
+export const Story: StoryObj<typeof ViewWithGallery> = {
+    args: {
+        html: transform(galleryMarkup).result.html,
+    },
+};
+Story.storyName = 'View gallery';
+
+export default {
+    title: 'View / Gallery',
+    component: ViewWithGallery,
+};

demo/stories/view/gallery/ViewWithGallery.scss

@@ -0,0 +1,5 @@
+.view-with-gallery {
+    img {
+        cursor: pointer;
+    }
+}

demo/stories/view/gallery/ViewWithGallery.tsx

@@ -0,0 +1,28 @@
+import type {FC} from 'react';
+
+import {GalleryProvider} from '@gravity-ui/components';
+
+import {YfmStaticView, type YfmStaticViewProps, useFilesGallery} from 'src/view';
+
+import './ViewWithGallery.scss';
+
+export type ViewWithGalleryProps = YfmStaticViewProps;
+
+const ViewWithGalleryContent: FC<ViewWithGalleryProps> = (props) => {
+    const {openFilesGallery} = useFilesGallery();
+
+    return (
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+        <div className="view-with-gallery" onClick={openFilesGallery}>
+            <YfmStaticView {...props} />
+        </div>
+    );
+};
+
+export const ViewWithGallery: FC<ViewWithGalleryProps> = (props) => {
+    return (
+        <GalleryProvider>
+            <ViewWithGalleryContent {...props} />
+        </GalleryProvider>
+    );
+};

demo/stories/view/gallery/markup.ts

@@ -0,0 +1,10 @@
+export const galleryMarkup = `
+## Images
+
+![Minion](https://octodex.github.com/images/minion.png)
+![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
+
+![Dojocat](https://octodex.github.com/images/dojocat.jpg "The Dojocat")
+
+![Video](http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4)
+`.trim();

demo/stories/view/staticView/YfmStaticView.stories.tsx

@@ -0,0 +1,18 @@
+import transform from '@diplodoc/transform';
+import type {StoryObj} from '@storybook/react';
+
+import {YfmStaticView} from 'src/view';
+
+import {markup} from '../../../defaults/content';
+
+export const Story: StoryObj<typeof YfmStaticView> = {
+    args: {
+        html: transform(markup).result.html,
+    },
+};
+Story.storyName = 'Static view';
+
+export default {
+    title: 'View / YfmStaticView',
+    component: YfmStaticView,
+};

package-lock.json

@@ -228,12 +228,13 @@
     "@diplodoc/quote-link-extension": "0.1.2",
     "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.57.2",
+    "@gravity-ui/components": "4.2.2",
     "@gravity-ui/eslint-config": "3.3.0",
     "@gravity-ui/gulp-utils": "1.0.3",
     "@gravity-ui/prettier-config": "1.1.0",
     "@gravity-ui/stylelint-config": "4.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
-    "@gravity-ui/uikit": "7.1.1",
+    "@gravity-ui/uikit": "7.10.0",
     "@playwright/experimental-ct-react": "1.49.0",
     "@playwright/test": "1.49.0",
     "@storybook/addon-docs": "8.4.1",
@@ -310,6 +311,9 @@
     },
     "lowlight": {
       "optional": true
+    },
+    "@gravity-ui/components": {
+      "optional": true
     }
   },
   "peerDependencies": {
@@ -322,6 +326,7 @@
     "@diplodoc/quote-link-extension": "^0.1.1",
     "@diplodoc/tabs-extension": "^3.5.1",
     "@diplodoc/transform": "^4.43.0",
+    "@gravity-ui/components": "^4.2.2",
     "@gravity-ui/uikit": "^7.1.0",
     "highlight.js": "^11.8.0",
     "katex": "^0.16.9",

package.json

@@ -1 +1,2 @@
 export * from './useYfmShowElemWithId';
+export * from './useFilesGallery';