docs: add inline comments

src/gallery-custom.tsx

@@ -1,45 +1,42 @@
 import PhotoSwipe from 'photoswipe'
 import { Options as PhotoswipeUiDefaultOptions } from 'photoswipe/dist/photoswipe-ui-default'
 import React, { useRef, useCallback, FC } from 'react'
-import PropTypes, { InferProps } from 'prop-types'
+import PropTypes from 'prop-types'
 import { getElBounds, sortNodes } from './helpers'
 import { Context } from './context'
 import { ItemRef, InternalItem } from './types'
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-  options: PropTypes.object,
-  layoutRef: PropTypes.shape({
-    current: PropTypes.instanceOf(
-      typeof Element === 'undefined' ? class Element {} : Element,
-    ),
-  }).isRequired,
-  ui: PropTypes.any.isRequired,
-}
-
 interface PhotoSwipeItem extends PhotoSwipe.Item {
   el: HTMLElement
 }
 
-type Props = InferProps<typeof propTypes>
-
 type PhotoSwipeUI =
   | (new (
       pswp: PhotoSwipe<PhotoSwipe.Options>,
       framework: PhotoSwipe.UIFramework,
     ) => PhotoSwipe.UI<PhotoSwipe.Options>)
   | boolean
 
-export interface CustomGalleryProps
-  extends Omit<Props, 'layoutRef' | 'ui' | 'options'> {
+export interface CustomGalleryProps {
+  /**
+   * Ref to your layout element
+   */
   layoutRef: React.MutableRefObject<HTMLElement>
+
+  /**
+   * PhotoSwipe UI class
+   */
   ui: PhotoSwipeUI
+
+  /**
+   * PhotoSwipe options
+   */
   options?: PhotoSwipe.Options & PhotoswipeUiDefaultOptions
 }
 
+/**
+ * Gallery component with ability to use specific UI and Layout
+ */
 export const CustomGallery: FC<CustomGalleryProps> = ({
   children,
   ui,
@@ -116,8 +113,17 @@ export const CustomGallery: FC<CustomGalleryProps> = ({
   )
 }
 
-// @ts-ignore
-CustomGallery.propTypes = propTypes
+CustomGallery.propTypes = {
+  children: PropTypes.any,
+  options: PropTypes.object,
+  // @ts-ignore
+  layoutRef: PropTypes.shape({
+    current: PropTypes.instanceOf(
+      typeof Element === 'undefined' ? class Element {} : Element,
+    ),
+  }).isRequired,
+  ui: PropTypes.any.isRequired,
+}
 
 CustomGallery.defaultProps = {
   options: {},

src/gallery-default.tsx

@@ -1,23 +1,18 @@
 import PhotoswipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
 import React, { useRef, FC } from 'react'
-import PropTypes, { InferProps } from 'prop-types'
+import PropTypes from 'prop-types'
 import { CustomGallery, DefaultLayout, layoutPropTypes, LayoutProps } from '.'
 
-const propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-  options: PropTypes.object,
-  ...layoutPropTypes,
-}
-
-type Props = InferProps<typeof propTypes>
-
-export interface GalleryProps extends Omit<Props & LayoutProps, 'options'> {
+export interface GalleryProps extends LayoutProps {
+  /**
+   * PhotoSwipe options
+   */
   options?: PhotoSwipe.Options & PhotoswipeUIDefault.Options
 }
 
+/**
+ * Gallery component with default Layout and UI
+ */
 export const Gallery: FC<GalleryProps> = ({
   children,
   options,
@@ -36,5 +31,7 @@ export const Gallery: FC<GalleryProps> = ({
   )
 }
 
-// @ts-ignore
-Gallery.propTypes = propTypes
+Gallery.propTypes = {
+  options: PropTypes.object,
+  ...layoutPropTypes,
+}

src/item.ts

@@ -1,23 +1,62 @@
 import { useRef, useCallback, useContext, useEffect, FC } from 'react'
-import PropTypes, { InferProps } from 'prop-types'
+import PropTypes from 'prop-types'
 import { ItemRef } from './types'
 import { Context } from './context'
 
-const propTypes = {
-  original: PropTypes.string,
-  thumbnail: PropTypes.string,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  title: PropTypes.string,
-  html: PropTypes.string,
-  children: PropTypes.func.isRequired,
+interface ChildrenFnProps {
+  /**
+   * Required `ref` object to any html node of item
+   */
+  ref: ItemRef
+
+  /**
+   * Function that opens the gallery at the current item's index
+   */
+  open: () => void
 }
 
-export interface ItemProps
-  extends Omit<InferProps<typeof propTypes>, 'children'> {
-  children: (props: { ref: ItemRef; open: () => void }) => JSX.Element
+export interface ItemProps {
+  /**
+   * Render prop for exposing Gallery API
+   */
+  children: (props: ChildrenFnProps) => JSX.Element
+
+  /**
+   * Url of original image
+   */
+  original?: string
+
+  /**
+   * Url of thumbnail
+   */
+  thumbnail?: string
+
+  /**
+   * Width of original image
+   */
+  width?: string | number
+
+  /**
+   * Height of original image
+   */
+  height?: string | number
+
+  /**
+   * Title for Default UI
+   */
+  title?: string
+
+  /**
+   * Html content, if you need to use it as modal
+   */
+  html?: string
 }
 
+/**
+ * Gallery item
+ *
+ * Should be a children of Gallery or CustomGallery component
+ */
 export const Item: FC<ItemProps> = ({ children, ...restProps }) => {
   const ref: ItemRef = useRef()
   const { remove, set, handleClick } = useContext(Context)
@@ -31,4 +70,12 @@ export const Item: FC<ItemProps> = ({ children, ...restProps }) => {
   return children({ ref, open })
 }
 
-Item.propTypes = propTypes
+Item.propTypes = {
+  original: PropTypes.string,
+  thumbnail: PropTypes.string,
+  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  title: PropTypes.string,
+  html: PropTypes.string,
+  children: PropTypes.func.isRequired,
+}

src/photoswipe-layout.tsx

@@ -26,17 +26,73 @@ export const layoutDefaultProps = {
 }
 
 export type LayoutProps = {
+  /**
+   * `.pswp__button--close` caption
+   *
+   * Default: 'Close (Esc)'
+   */
   closeButtonCaption?: string
+
+  /**
+   * `.pswp__button--share` caption
+   *
+   * Default: 'Share'
+   */
   shareButtonCaption?: string
+
+  /**
+   * .pswp__button--fs caption
+   *
+   * Default: 'Toggle fullscreen'
+   */
   toggleFullscreenButtonCaption?: string
+
+  /**
+   * .pswp__button--zoom caption
+   *
+   * Default: 'Zoom in/out'
+   */
   zoomButtonCaption?: string
+
+  /**
+   * .pswp__button--arrow--left caption
+   *
+   * Default: 'Previous (arrow left)'
+   */
   prevButtonCaption?: string
+
+  /**
+   * .pswp__button--arrow--right caption
+   *
+   * Default: 'Next (arrow right)'
+   */
   nextButtonCaption?: string
+
+  /**
+   * Show .pswp__button--share
+   *
+   * Default: true
+   */
   shareButton?: boolean
+
+  /**
+   * Show .pswp__button--fs
+   *
+   * Default: true
+   */
   fullscreenButton?: boolean
+
+  /**
+   * Show .pswp__button--zoom
+   *
+   * Default: true
+   */
   zoomButton?: boolean
 }
 
+/**
+ * Default PhotoSwipe layout
+ */
 export const DefaultLayout = React.forwardRef<HTMLElement, LayoutProps>(
   (
     {