feat(pswp-v5): v2.0.0 pre-release chores

update changelog; fix readme; withDefaultGallery -> withGallery

.github/workflows/publish.yml

@@ -15,6 +15,6 @@ jobs:
           cache: yarn
       - run: yarn install
       - run: yarn test --bail --ci
-      - run: yarn npm publish --tag next
+      - run: yarn npm publish
         env:
           YARN_NPM_AUTH_TOKEN: ${{secrets.npm_token}}

CHANGELOG.md

@@ -2,12 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-## [2.0.0](https://github.com/dromru/react-photoswipe-gallery/compare/v1.3.6...v2.0.0) ()
+## [2.0.0](https://github.com/dromru/react-photoswipe-gallery/compare/v1.3.10...v2.0.0) (2022-04-15)
 
+### ⚠ BREAKING CHANGES
+
+* drop PhotoSwipe v4 support (#592)
+* remove prop `title` (Item component) (#592)
+* remove BaseGallery, CustomGallery, DefaultLayout (#592)
 
 ### Features
 
-* **core:** add PhotoSwipe v5 support
+* add PhotoSwipe v5 support (#592)
+* add new props for Item component: `originalSrcset`, `alt`, `caption`, `cropped` (#592)
+* add new props for Gallery component: `onBeforeOpen`, `withCaption`, `withDownloadButton`, `plugins` (#592)
+* add PhotoSwipe plugins support (#592)
+* implement hash navigation (there is no built-in hash navigation in photoswipe v5) (#592)
 
 ## [1.3.10](https://github.com/dromru/react-photoswipe-gallery/compare/v1.3.9...v1.3.10) (2022-04-01)
 

README.md

@@ -41,20 +41,20 @@ const MyGallery = () => (
 
 ## Demo
 
-Check out the [Storybook](https://dromru.github.io/react-photoswipe-gallery/photoswipe-v5/) to see it in action 🚀
+Check out the [Storybook](https://dromru.github.io/react-photoswipe-gallery/) to see it in action 🚀
 
-Stories are written as real-world examples, so you can see them at the bottom of Storybook UI in the Story tab. Or browse the [source code](https://github.com/dromru/react-photoswipe-gallery/tree/photoswipe-v5/src/storybook) on GitHub. It covers most of the use-cases and provides examples for configuration options.
+Stories are written as real-world examples, so you can see them at the bottom of Storybook UI in the Story tab. Or browse the [source code](https://github.com/dromru/react-photoswipe-gallery/tree/master/src/storybook) on GitHub. It covers most of the use-cases and provides examples for configuration options.
 
 ## Installation
 
 ```shell
-yarn add photoswipe react-photoswipe-gallery@next
+yarn add photoswipe react-photoswipe-gallery
 ```
 
 or
 
 ```shell
-npm install photoswipe react-photoswipe-gallery@next --save
+npm install photoswipe react-photoswipe-gallery --save
 ```
 
 ## Hash Navigation
@@ -78,29 +78,29 @@ const MyGallery = () => (
 )
 ```
 
-[Example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/hash-navigation.stories.tsx)
+[Example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/hash-navigation.stories.tsx)
 
 ## Captions
 
-If you want to add captions to your slides, you need to pass `withDefaultCaption` prop to the `<Gallery />`
+If you want to add captions to your slides, you need to pass `withCaption` prop to the `<Gallery />`
 and pass `caption` prop to each `<Item />`. It accepts html as well. If `caption` isn't provided - it will use `alt` prop.
 
 ```javascript
 const MyGallery = () => (
-  <Gallery withDefaultCaption>
+  <Gallery withCaption>
     <Item
       caption="Foo"
       {/*...*/}
     />
     <Item
-      caption="Bar"
+      alt="Bar"
       {/*...*/}
     />
   </Gallery>
 )
 ```
 
-[Example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/with-default-caption.stories.tsx)
+[Example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/with-default-caption.stories.tsx)
 
 ## Plugins
 
@@ -129,7 +129,7 @@ const MyGallery = () => (
 )
 ```
 
-[Example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/with-default-caption.stories.tsx)
+[Example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/with-default-caption.stories.tsx)
 
 ## Props
 
@@ -141,11 +141,11 @@ const MyGallery = () => (
 | - | - | - | - |
 | `id` | Number or String | ✓ (for hash navigation) | Item ID, for [hash navigation](#hash-navigation) |
 | `options` | Object | | PhotoSwipe [options](https://photoswipe.com/options/) |
-| `plugins` | Function | | Function for registering PhotoSwipe [plugins](#plugins). You should pass `photoswipeLightbox` to each plugin constructor ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/plugins.stories.tsx)) |
+| `plugins` | Function | | Function for registering PhotoSwipe [plugins](#plugins). You should pass `photoswipeLightbox` to each plugin constructor ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/plugins.stories.tsx)) |
 | `onBeforeOpen` | Function | | Triggers before `PhotoSwipe.init()` call. Use it for something, that you need to do, before PhotoSwipe.init() call - for example, you can use it for [registration of custom UI elements](https://photoswipe.com/adding-ui-elements). It will receive PhotoSwipe instance as the first argument: `(photoswipe: PhotoSwipe) => void` |
 | `onOpen` | Function | | Triggers after `PhotoSwipe.init()` call. Use it for accessing PhotoSwipe [API](https://photoswipe.com/methods/#photoswipe-core-methods). It will receive PhotoSwipe instance as the first argument: `(photoswipe: PhotoSwipe) => void` |
-| `withDefaultCaption` | Boolean | ✓ (for default captions) | Enables built-in [caption](#captions) display. Use the `caption` prop of the Item component to control caption text ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/with-default-caption.stories.tsx)) |
-| `withDownloadButton` | Boolean | ✓ (for download button) | Adds UI control for downloading the original image of the current slide ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/with-download-button.stories.tsx)) |
+| `withCaption` | Boolean | ✓ (for default captions) | Enables built-in [caption](#captions) display. Use the `caption` prop of the Item component to control caption text ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/with-default-caption.stories.tsx)) |
+| `withDownloadButton` | Boolean | ✓ (for download button) | Adds UI control for downloading the original image of the current slide ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/with-download-button.stories.tsx)) |
 
 ### Item
 
@@ -157,15 +157,15 @@ const MyGallery = () => (
 | - | - | - | - |
 | `children` | Function | ✓ | Render prop for exposing `Gallery` API |
 | `original` | String |  | Url of original image |
-| `originalSrcset` | String |  | Srcset of original image ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/srcset.stories.tsx)) |
+| `originalSrcset` | String |  | Srcset of original image ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/srcset.stories.tsx)) |
 | `thumbnail` | String |  | Url of thumbnail |
 | `width` | Number or String |  | Width of original image |
 | `height` | Number or String |  | Height of original image |
 | `alt` | String |  | Alternate text for original image |
-| `caption` | String |  | Text or html for caption ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/with-default-caption.stories.tsx)) |
-| `cropped` | Boolean |  | Thumbnail is cropped ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/cropped.stories.tsx)) |
-| `html` | String |  | Html content, if you need to use it as modal ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/html.stories.tsx)) |
-| `id` | Number or String |  | Item ID, for [hash navigation](#hash-navigation) ([example](https://github.com/dromru/react-photoswipe-gallery/blob/photoswipe-v5/src/storybook/hash-navigation.stories.tsx)) |
+| `caption` | String |  | Text or html for caption ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/with-default-caption.stories.tsx)) |
+| `cropped` | Boolean |  | Thumbnail is cropped ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/cropped.stories.tsx)) |
+| `html` | String |  | Html content, if you need to use it as modal ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/html.stories.tsx)) |
+| `id` | Number or String |  | Item ID, for [hash navigation](#hash-navigation) ([example](https://github.com/dromru/react-photoswipe-gallery/blob/master/src/storybook/hash-navigation.stories.tsx)) |
 
 #### Note about Item's `children` render prop.
 
@@ -178,12 +178,12 @@ type RenderItem = (props: {
    *
    * Can be omitted if there is only one item in the gallery
    */
-  ref: React.MutableRefObject;
+  ref: React.MutableRefObject
 
   /**
    * Function that opens the gallery at the current item's index
    */
-  open: () => void;
+  open: (e: MouseEvent) => void
 }) => JSX.Element
 
 <Item>
@@ -220,7 +220,7 @@ The `useGallery` hook returns an object with some useful methods.
 
 ```shell
 yarn install
-yarn pnpify --sdk
+yarn sdks vscode
 ```
 then
 ```shell

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-photoswipe-gallery",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0",
   "description": "React component wrapper around PhotoSwipe",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -83,7 +83,7 @@
     "jest": "27.5.1",
     "lint-staged": "12.3.7",
     "photoswipe": "5.2.2",
-    "photoswipe-dynamic-caption-plugin": "irudoy/photoswipe-dynamic-caption-plugin",
+    "photoswipe-dynamic-caption-plugin": "dimsemenov/photoswipe-dynamic-caption-plugin",
     "pinst": "3.0.0",
     "prettier": "2.6.2",
     "prop-types": "15.8.1",

src/__tests__/index.test.tsx

@@ -528,11 +528,11 @@ describe('gallery', () => {
     )
   })
 
-  test('should call `ui.registerElement` when `withDefaultCaption` option enabled', async () => {
+  test('should call `ui.registerElement` when `withCaption` option enabled', async () => {
     const user = userEvent.setup()
     const items = createItems(1)
 
-    render(<TestGallery items={items} withDefaultCaption />)
+    render(<TestGallery items={items} withCaption />)
 
     await user.click(screen.getAllByRole('img')[0])
     eventListeners.uiRegister.forEach((fn) => fn())

src/gallery.tsx

@@ -67,7 +67,7 @@ export interface GalleryProps {
    *
    * https://photoswipe.com/caption/
    */
-  withDefaultCaption?: boolean
+  withCaption?: boolean
 
   /**
    * Adds UI control for downloading the original image of the current slide
@@ -87,7 +87,7 @@ export const Gallery: FC<GalleryProps> = ({
   id: galleryUID,
   onBeforeOpen,
   onOpen,
-  withDefaultCaption,
+  withCaption,
   withDownloadButton,
 }) => {
   const items = useRef(new Map<ItemRef, InternalItem>())
@@ -197,7 +197,7 @@ export const Gallery: FC<GalleryProps> = ({
         })
       }
 
-      if (withDefaultCaption) {
+      if (withCaption) {
         instance.on('uiRegister', () => {
           instance.ui.registerElement({
             name: 'default-caption',
@@ -275,7 +275,7 @@ export const Gallery: FC<GalleryProps> = ({
       galleryUID,
       onBeforeOpen,
       onOpen,
-      withDefaultCaption,
+      withCaption,
       withDownloadButton,
     ],
   )
@@ -374,6 +374,6 @@ Gallery.propTypes = {
   id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onBeforeOpen: PropTypes.func,
   onOpen: PropTypes.func,
-  withDefaultCaption: PropTypes.bool,
+  withCaption: PropTypes.bool,
   withDownloadButton: PropTypes.bool,
 }

src/storybook/playground.stories.tsx

@@ -110,7 +110,7 @@ const Kittens: FC<StoryProps> = ({ currentItem }) => {
 
 export const playground: Story<StoryProps> = (args) => {
   return (
-    <Gallery withDefaultCaption>
+    <Gallery withCaption>
       <Kittens {...args} />
     </Gallery>
   )

src/storybook/with-default-caption.stories.tsx → src/storybook/with-caption.stories.tsx

@@ -15,7 +15,7 @@ export const caption: Story = () => {
     maxHeight: '100%',
   }
   return (
-    <Gallery withDefaultCaption>
+    <Gallery withCaption>
       <div
         style={{
           display: 'grid',

src/storybook/without-images.stories.tsx

@@ -36,7 +36,7 @@ export const withoutImages: Story = () => {
   const shuffleLinks = () => setLinks([...shuffle(links)])
 
   return (
-    <Gallery options={{ showHideOpacity: true }} withDefaultCaption>
+    <Gallery options={{ showHideOpacity: true }} withCaption>
       <div style={{ marginBottom: 20 }}>
         <Button onClick={addLink}>Add</Button>
         <Button onClick={removeLink}>Remove</Button>

yarn.lock

@@ -15561,9 +15561,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-photoswipe-dynamic-caption-plugin@irudoy/photoswipe-dynamic-caption-plugin:
+photoswipe-dynamic-caption-plugin@dimsemenov/photoswipe-dynamic-caption-plugin:
   version: 1.1.1
-  resolution: "photoswipe-dynamic-caption-plugin@https://github.com/irudoy/photoswipe-dynamic-caption-plugin.git#commit=6156c50c4b4d7cd23d79b9671e1f6c590e8e2318"
+  resolution: "photoswipe-dynamic-caption-plugin@https://github.com/dimsemenov/photoswipe-dynamic-caption-plugin.git#commit=6fe0f2d9ac4820e3f80beccbacd4314b073b98b5"
   checksum: 9f29db84dcec4beb94582641aa9190f99ca634ba90d151a2c809ab7ca9416ae133a149159a3cdc10f0e72d127fe20b49435cbd66b69f0b9dc24729d4c5b409a8
   languageName: node
   linkType: hard
@@ -16443,7 +16443,7 @@ photoswipe-dynamic-caption-plugin@irudoy/photoswipe-dynamic-caption-plugin:
     jest: 27.5.1
     lint-staged: 12.3.7
     photoswipe: 5.2.2
-    photoswipe-dynamic-caption-plugin: irudoy/photoswipe-dynamic-caption-plugin
+    photoswipe-dynamic-caption-plugin: dimsemenov/photoswipe-dynamic-caption-plugin
     pinst: 3.0.0
     prettier: 2.6.2
     prop-types: 15.8.1