@graphcommerce/image 2.105.8 → 2.105.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/image",
-  "version": "2.105.8",
+  "version": "2.105.12",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,13 +16,13 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.19"
+    "@graphcommerce/framer-utils": "^2.103.21"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.8",
-    "@graphcommerce/prettier-config-pwa": "^3.0.4",
-    "@graphcommerce/typescript-config-pwa": "^3.1.1",
+    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
+    "@graphcommerce/eslint-config-pwa": "^3.1.10",
+    "@graphcommerce/prettier-config-pwa": "^3.0.5",
+    "@graphcommerce/typescript-config-pwa": "^3.1.2",
     "@playwright/test": "^1.17.1"
   },
   "peerDependencies": {
@@ -32,5 +32,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.8.0"
   },
-  "gitHead": "a69bd94ffdcca6ca9487eec1cafe9ade3fcdffa3"
+  "gitHead": "bc5423d7547f8685db4cd8fc6d8f7a2a51ebed05"
 }

package/example/CHANGELOG.md

@@ -1,54 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.103.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image-example@2.102.35...@graphcommerce/image-example@2.103.0) (2021-10-27)
-
-
-### Features
-
-* **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
-
-
-
-
-
-# 2.102.0 (2021-09-27)
-
-
-### Bug Fixes
-
-* ignore md files from triggering version updates ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))
-* make packages private so they dont get published accidently ([f7b693f](https://github.com/ho-nl/m2-pwa/commit/f7b693ff6a4d232d0871f6a68922d14678853a96))
-* versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
-
-
-### Features
-
-* **image:** introduced completely rewritten Image component ([e3413b3](https://github.com/ho-nl/m2-pwa/commit/e3413b3a57392d6571ea64cb8d9c8dca05ea31df))
-* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
-* upgraded to nextjs 11 ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
-
-
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.101.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image-example@2.100.18...@graphcommerce/image-example@2.101.0) (2021-08-12)
-
-### Features
-
-- upgraded to nextjs 11
-  ([0053beb](https://github.com/ho-nl/m2-pwa/commit/0053beb7ef597c190add7264256a0eaec35868da))
-
-## [2.100.11](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/image-example@2.100.10...@graphcommerce/image-example@2.100.11) (2021-07-20)
-
-### Bug Fixes
-
-- ignore md files from triggering version updates
-  ([4f98392](https://github.com/ho-nl/m2-pwa/commit/4f9839250b3a32d3070da5290e5efcc5e2243fba))

package/example/README.md

@@ -1,23 +0,0 @@
-# with-route-as-modal
-
-On many popular social media, opening a post will update the URL but won't trigger a navigation and will instead display the content inside a modal. This behavior ensures the user won't lose the current UI context (scroll position). The URL still reflect the post's actual page location and any refresh will bring the user there. This behavior ensures great UX without neglecting SEO.
-
-This example shows how to conditionally display a modal based on a route.
-
-## Deploy your own
-
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal&project-name=with-route-as-modal&repository-name=with-route-as-modal)
-
-## How to use
-
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
-
-```bash
-npx create-next-app --example with-route-as-modal with-route-as-modal-app
-# or
-yarn create next-app --example with-route-as-modal with-route-as-modal-app
-```
-
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

package/example/next-env.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/types/global" />
-/// <reference types="next/image-types/global" />

package/example/next.config.js

@@ -1,14 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const withGraphCommerce = require('@graphcommerce/next-config').withYarn1Workspaces()
-
-/** @type {import('next/dist/next-server/server/config').NextConfig} */
-const config = {
-  images: {
-    domains: ['upload.wikimedia.org', 'backend.reachdigital.dev'],
-    // imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
-    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 2560, 3840],
-  },
-}
-
-module.exports = withGraphCommerce(config)

package/example/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "@graphcommerce/image-example",
-  "private": true,
-  "version": "2.103.45",
-  "scripts": {
-    "dev": "next",
-    "build": "next build",
-    "start": "next start"
-  },
-  "dependencies": {
-    "@graphcommerce/image": "^2.105.8",
-    "@graphcommerce/next-config": "^2.109.3",
-    "@graphcommerce/next-ui": "^3.20.8",
-    "framer-motion": "^5.5.1",
-    "next": "^12.0.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-focus-lock": "^2.7.1"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "typescript": "^4.5.4"
-  }
-}

package/example/pages/_app.tsx

@@ -1,28 +0,0 @@
-export default function App({ Component, pageProps }) {
-  return (
-    <>
-      <style
-        // We're setting the global this way so that they are applied with JS disabled in development mode.
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-          body {
-            font-family: SF Pro Text, 'SF Pro Icons', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
-            padding: 20px;
-            margin: 0;
-          }
-
-          details {
-            margin-bottom: 1em;
-          }
-
-          summary :is(h2, h3) {
-            display: inline;
-          }
-        `,
-        }}
-      />
-      <Component {...pageProps} />
-    </>
-  )
-}

package/example/pages/index.tsx

@@ -1,138 +0,0 @@
-import { Image } from '@graphcommerce/image'
-import React from 'react'
-import image from '../components/image.jpg'
-
-const imgWidth = image.width
-const imgHeight = image.height
-
-function Index() {
-  return (
-    <>
-      <h1>@graphcommerce/image</h1>
-
-      <p>The layout should never have a layout shift when loading the page</p>
-      <p>The layout should never have a layout shift when expanding a section</p>
-
-      <h2>Image with an external image</h2>
-
-      <details open style={{ maxWidth: 600 }}>
-        <summary>
-          <h3>layout=responsive</h3>
-        </summary>
-        <Image
-          src='https://backend.reachdigital.dev/media/catalog/product/cache/63405d393cd2d0278e3cc8b45744d4a7/2/0/205_1_3.jpg'
-          layout='responsive'
-          width={imgWidth}
-          height={imgHeight}
-          sizes={{ 0: '100vw', 600: '600px' }}
-        />
-      </details>
-
-      <details open>
-        <summary>
-          <h3>layout=fixed</h3>
-        </summary>
-        <div style={{ overflowX: 'scroll' }}>
-          <Image
-            src='https://backend.reachdigital.dev/media/catalog/product/cache/63405d393cd2d0278e3cc8b45744d4a7/2/0/205_1_3.jpg'
-            layout='fixed'
-            width={imgWidth / 4}
-            height={imgHeight / 4}
-          />
-        </div>
-      </details>
-
-      <details open>
-        <summary>
-          <h3>layout=intrinsic</h3>
-        </summary>
-        <Image
-          src='https://backend.reachdigital.dev/media/catalog/product/cache/63405d393cd2d0278e3cc8b45744d4a7/2/0/205_1_3.jpg'
-          layout='intrinsic'
-          width={imgWidth}
-          height={imgHeight}
-          sizes='calc(100vw - 40px)'
-        />
-      </details>
-
-      <details open>
-        <summary>
-          <h3>layout=fill</h3>
-        </summary>
-        <div style={{ height: 200, backgroundColor: 'darkgray' }}>
-          <Image
-            src='https://backend.reachdigital.dev/media/catalog/product/cache/63405d393cd2d0278e3cc8b45744d4a7/2/0/205_1_3.jpg'
-            layout='fill'
-            style={{ objectFit: 'contain' }}
-          />
-        </div>
-      </details>
-
-      <h2>Image with an relative image</h2>
-
-      <details>
-        <summary>
-          <h3>layout=responsive</h3>
-        </summary>
-        <Image src='/image.jpg' layout='responsive' width={imgWidth} height={imgHeight} />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=fixed</h3>
-        </summary>
-        <Image src='/image.jpg' layout='fixed' width={imgWidth / 4} height={imgHeight / 4} />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=intrinsic</h3>
-        </summary>
-        <Image src='/image.jpg' layout='intrinsic' width={imgWidth} height={imgHeight} />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=fill</h3>
-        </summary>
-        <div style={{ height: 200, backgroundColor: 'darkgray' }}>
-          <Image src='/image.jpg' layout='fill' style={{ objectFit: 'contain' }} />
-        </div>
-      </details>
-
-      <h2>Image with an imported image</h2>
-
-      <details>
-        <summary>
-          <h3>layout=responsive</h3>
-        </summary>
-        <Image src={image} layout='responsive' sizes='100vw' />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=fixed</h3>
-        </summary>
-        <Image src={image} layout='fixed' width={imgWidth / 4} height={imgHeight / 4} />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=intrinsic</h3>
-        </summary>
-        <Image src={image} layout='intrinsic' sizes='100vw' />
-      </details>
-
-      <details>
-        <summary>
-          <h3>layout=fill</h3>
-        </summary>
-        <div style={{ height: 200, backgroundColor: 'darkgray' }}>
-          <Image src={image} layout='fill' style={{ objectFit: 'contain' }} />
-        </div>
-      </details>
-    </>
-  )
-}
-
-export default Index

package/example/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve"
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["**/node_modules", "**/.*/"]
-}