@azerion/bunosaurus-plugin-ideal-image 0.0.0-stage → 4.0.0

package/lib/theme/IdealImageLegacy/components/Media/index.js

@@ -0,0 +1,169 @@
+import React, {PureComponent} from 'react';
+// import PropTypes from 'prop-types'
+import compose from '../composeStyle';
+import {icons as defaultIcons} from '../constants';
+
+const {load, loading, loaded, error, noicon, offline} = defaultIcons;
+
+export default class Media extends PureComponent {
+  /*static propTypes = {
+    /!** URL of the image *!/
+    src: PropTypes.string.isRequired,
+    /!** Width of the image in px *!/
+    width: PropTypes.number.isRequired,
+    /!** Height of the image in px *!/
+    height: PropTypes.number.isRequired,
+    placeholder: PropTypes.oneOfType([
+      PropTypes.shape({
+        /!** Solid color placeholder *!/
+        color: PropTypes.string.isRequired,
+      }),
+      PropTypes.shape({
+        /!**
+         * [Low Quality Image Placeholder](https://github.com/zouhir/lqip)
+         * [SVG-Based Image Placeholder](https://github.com/technopagan/sqip)
+         * base64 encoded image of low quality
+         *!/
+        lqip: PropTypes.string.isRequired,
+      }),
+    ]).isRequired,
+    /!** display icon *!/
+    icon: PropTypes.oneOf([load, loading, loaded, error, noicon, offline])
+      .isRequired,
+    /!** Map of icons *!/
+    icons: PropTypes.object.isRequired,
+    /!** theme object - CSS Modules or React styles *!/
+    theme: PropTypes.object.isRequired,
+    /!** Alternative text *!/
+    alt: PropTypes.string,
+    /!** Color of the icon *!/
+    iconColor: PropTypes.string,
+    /!** Size of the icon in px *!/
+    iconSize: PropTypes.number,
+    /!** React's style attribute for root element of the component *!/
+    style: PropTypes.object,
+    /!** React's className attribute for root element of the component *!/
+    className: PropTypes.string,
+    /!** On click handler *!/
+    onClick: PropTypes.func,
+    /!** callback to get dimensions of the placeholder *!/
+    onDimensions: PropTypes.func,
+    /!** message to show below the icon *!/
+    message: PropTypes.node,
+    /!** reference for Waypoint *!/
+    innerRef: PropTypes.func,
+    /!** noscript image src *!/
+    nsSrc: PropTypes.string,
+    /!** noscript image srcSet *!/
+    nsSrcSet: PropTypes.string,
+  }*/
+
+  static defaultProps = {
+    iconColor: '#fff',
+    iconSize: 64,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {isMounted: false};
+  }
+
+  componentDidMount() {
+    this.setState({isMounted: true});
+
+    if (this.props.onDimensions && this.dimensionElement)
+      /* Firefox returns 0 for both clientWidth and clientHeight.
+      To fix this we can check the parentNode's clientWidth and clientHeight as a fallback. */
+      this.props.onDimensions({
+        width:
+          this.dimensionElement.clientWidth ||
+          this.dimensionElement.parentNode.clientWidth,
+        height:
+          this.dimensionElement.clientHeight ||
+          this.dimensionElement.parentNode.clientHeight,
+      });
+  }
+
+  renderIcon(props) {
+    const {icon, icons, iconColor: fill, iconSize: size, theme} = props;
+    const iconToRender = icons[icon];
+    if (!iconToRender) return null;
+    const styleOrClass = compose(
+      {width: size + 100, height: size, color: fill},
+      theme.icon,
+    );
+    return React.createElement('div', styleOrClass, [
+      React.createElement(iconToRender, {fill, size, key: 'icon'}),
+      React.createElement('br', {key: 'br'}),
+      this.props.message,
+    ]);
+  }
+
+  renderImage(props) {
+    return props.icon === loaded ? (
+      <img
+        {...compose(props.theme.img)}
+        src={props.src}
+        alt={props.alt}
+        width={props.width}
+        height={props.height}
+      />
+    ) : (
+      <svg
+        {...compose(props.theme.img)}
+        width={props.width}
+        height={props.height}
+        ref={(ref) => (this.dimensionElement = ref)}
+      />
+    );
+  }
+
+  renderNoscript(props) {
+    // render noscript in ssr + hydration to avoid hydration mismatch error
+    return this.state.isMounted ? null : (
+      <noscript>
+        <img
+          {...compose(props.theme.img, props.theme.noscript)}
+          src={props.nsSrc}
+          srcSet={props.nsSrcSet}
+          alt={props.alt}
+          width={props.width}
+          height={props.height}
+        />
+      </noscript>
+    );
+  }
+
+  render() {
+    const props = this.props;
+    const {placeholder, theme} = props;
+    let background;
+    if (props.icon === loaded) {
+      background = {};
+    } else if (placeholder.lqip) {
+      background = {
+        backgroundImage: `url("${placeholder.lqip}")`,
+      };
+    } else {
+      background = {
+        backgroundColor: placeholder.color,
+      };
+    }
+    return (
+      <div
+        {...compose(
+          theme.placeholder,
+          background,
+          props.style,
+          props.className,
+        )}
+        onClick={this.props.onClick}
+        onKeyPress={this.props.onClick}
+        ref={this.props.innerRef}>
+        {this.renderImage(props)}
+        {this.renderNoscript(props)}
+        {this.renderIcon(props)}
+      </div>
+    );
+  }
+}

package/lib/theme/IdealImageLegacy/components/MediaWithDefaults/README.md

@@ -0,0 +1,89 @@
+All possible states of the component
+
+```js
+const lqip =
+  'data:image/jpeg;base64,/9j/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAA4DASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAUG/8QAIRAAAQQDAAEFAAAAAAAAAAAAAQIDBREABAYhEjEyQVH/xAAUAQEAAAAAAAAAAAAAAAAAAAAE/8QAGBEBAAMBAAAAAAAAAAAAAAAAAQACIRH/2gAMAwEAAhEDEQA/AMJ2DG+7Dw0nz8gsx+uyhlxnWdLakOlfzpIF3aRf1WT5t96P5+N1ug9Tu7ZWS8q1gG6B8H2FDz+YxhjUrEOdZ//Z';
+
+const sqip =
+  "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4774 3024'%3e%3cfilter id='b'%3e%3cfeGaussianBlur stdDeviation='12' /%3e%3c/filter%3e%3cpath fill='%23515a57' d='M0 0h4774v3021H0z'/%3e%3cg filter='url(%23b)' transform='translate(9.3 9.3) scale(18.64844)' fill-opacity='.5'%3e%3cellipse fill='whitefef' rx='1' ry='1' transform='matrix(74.55002 60.89891 -21.7939 26.67923 151.8 104.4)'/%3e%3cellipse fill='black80c' cx='216' cy='49' rx='59' ry='59'/%3e%3cellipse fill='black60e' cx='22' cy='60' rx='46' ry='89'/%3e%3cellipse fill='%23ffebd5' cx='110' cy='66' rx='42' ry='28'/%3e%3cellipse fill='whiteff9' rx='1' ry='1' transform='rotate(33.3 -113.2 392.6) scale(42.337 17.49703)'/%3e%3cellipse fill='%23031f1e' rx='1' ry='1' transform='matrix(163.4651 -64.93326 6.77862 17.06471 111 16.4)'/%3e%3cpath fill='whitefea' d='M66 74l9 39 16-44z'/%3e%3cellipse fill='%23a28364' rx='1' ry='1' transform='rotate(-32.4 253.2 -179) scale(30.79511 43.65381)'/%3e%3cpath fill='%231a232c' d='M40 139l61-57 33 95z'/%3e%3cpath fill='%230a222b' d='M249.8 153.3l-48.1-48 32.5-32.6 48.1 48z'/%3e%3c/g%3e%3c/svg%3e";
+<table>
+  <tbody>
+    <tr>
+      <th align="left" width="100">
+        load
+      </th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'load'}
+        />
+      </td>
+      <th align="left" width="100">
+        noicon
+      </th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'noicon'}
+        />
+      </td>
+    </tr>
+    <tr>
+      <th align="left">loading</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'loading'}
+        />
+      </td>
+      <th align="left">offline</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'offline'}
+        />
+      </td>
+    </tr>
+    <tr>
+      <th align="left">loaded</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'loaded'}
+        />
+      </td>
+      <th align="left">error</th>
+      <td>
+        <MediaWithDefaults
+          width={3500}
+          height={2095}
+          placeholder={{lqip: lqip}}
+          src="andre-spieker-238-unsplash.jpg"
+          style={{maxWidth: 200}}
+          icon={'error'}
+        />
+      </td>
+    </tr>
+  </tbody>
+</table>;
+```

package/lib/theme/IdealImageLegacy/components/MediaWithDefaults/index.d.ts

@@ -0,0 +1,32 @@
+declare const MediaWithDefaults: ({ icons: iconsProp, theme: themeProp, ...props }: {
+    [x: string]: any;
+    icons?: {
+        [x: string]: ((props: any) => import("react").JSX.Element) | null;
+    } | undefined;
+    theme?: {
+        placeholder: {
+            backgroundSize: string;
+            backgroundRepeat: string;
+            position: string;
+        };
+        img: {
+            width: string;
+            height: string;
+            maxWidth: string;
+            marginBottom: string;
+        };
+        icon: {
+            position: string;
+            top: string;
+            left: string;
+            transform: string;
+            textAlign: string;
+        };
+        noscript: {
+            position: string;
+            top: number;
+            left: number;
+        };
+    } | undefined;
+}) => import("react").JSX.Element;
+export default MediaWithDefaults;

package/lib/theme/IdealImageLegacy/components/MediaWithDefaults/index.js

@@ -0,0 +1,11 @@
+import Media from '../Media';
+import icons from '../icons';
+import theme from '../theme';
+
+const MediaWithDefaults = ({
+  icons: iconsProp = icons,
+  theme: themeProp = theme,
+  ...props
+}) => <Media {...props} icons={iconsProp} theme={themeProp} />;
+
+export default MediaWithDefaults;

package/lib/theme/IdealImageLegacy/components/composeStyle.d.ts

@@ -0,0 +1,23 @@
+export default _default;
+/**
+ * Composes styles and/or classes
+ *
+ * For classes it will concat them in in one string
+ * and return as `className` property.
+ * Alternative is https://github.com/JedWatson/classnames
+ *
+ * For objects it will merge them in one object
+ * and return as `style` property.
+ *
+ * Usage:
+ * Assume you have `theme` object, which can be css-module
+ * or object or other css-in-js compatible with css-module
+ *
+ * <a {...compose(theme.link, theme.active, {color: "#000"})}>link</a>
+ *
+ * @returns {{className: string, style: object}} - params for React component
+ */
+declare function _default(...stylesOrClasses: any[]): {
+    className: string;
+    style: object;
+};

package/lib/theme/IdealImageLegacy/components/composeStyle.js

@@ -0,0 +1,37 @@
+/**
+ * Composes styles and/or classes
+ *
+ * For classes it will concat them in in one string
+ * and return as `className` property.
+ * Alternative is https://github.com/JedWatson/classnames
+ *
+ * For objects it will merge them in one object
+ * and return as `style` property.
+ *
+ * Usage:
+ * Assume you have `theme` object, which can be css-module
+ * or object or other css-in-js compatible with css-module
+ *
+ * <a {...compose(theme.link, theme.active, {color: "#000"})}>link</a>
+ *
+ * @returns {{className: string, style: object}} - params for React component
+ */
+export default (...stylesOrClasses) => {
+  const classes = [];
+  let style;
+  for (const obj of stylesOrClasses) {
+    if (obj instanceof Object) {
+      Object.assign(style || (style = {}), obj);
+    } else if (obj === undefined || obj === false) {
+      // ignore
+    } else if (typeof obj === 'string') {
+      classes.push(obj);
+    } else {
+      throw new Error(`Unexpected value ${obj}`);
+    }
+  }
+  return {
+    className: classes.length > 1 ? classes.join(' ') : classes[0],
+    style,
+  };
+};

package/lib/theme/IdealImageLegacy/components/constants.d.ts

@@ -0,0 +1,14 @@
+export declare const icons: {
+    load: string;
+    loading: string;
+    loaded: string;
+    error: string;
+    noicon: string;
+    offline: string;
+};
+export declare const loadStates: {
+    initial: string;
+    loading: string;
+    loaded: string;
+    error: string;
+};

package/lib/theme/IdealImageLegacy/components/constants.js

@@ -0,0 +1,24 @@
+const load = 'load';
+const loading = 'loading';
+const loaded = 'loaded';
+const error = 'error';
+const noicon = 'noicon';
+const offline = 'offline';
+
+export const icons = {
+  load,
+  loading,
+  loaded,
+  error,
+  noicon,
+  offline,
+};
+
+const initial = 'initial';
+
+export const loadStates = {
+  initial,
+  loading,
+  loaded,
+  error,
+};

package/lib/theme/IdealImageLegacy/components/helpers.d.ts

@@ -0,0 +1,22 @@
+export declare const ssr: boolean;
+export declare const nativeConnection: boolean;
+export declare const guessMaxImageWidth: (dimensions: any, w: any) => number;
+export declare const bytesToSize: (bytes: any) => string;
+export declare const supportsWebp: boolean;
+export declare const selectSrc: ({ srcSet, maxImageWidth, supportsWebp }: {
+    maxImageWidth: any;
+    srcSet: any;
+    supportsWebp: any;
+}) => any;
+export declare const fallbackParams: ({ srcSet, getUrl }: {
+    getUrl: any;
+    srcSet: any;
+}) => {
+    nsSrcSet?: undefined;
+    nsSrc?: undefined;
+    ssr?: undefined;
+} | {
+    nsSrcSet: any;
+    nsSrc: any;
+    ssr: true;
+};

package/lib/theme/IdealImageLegacy/components/helpers.js

@@ -0,0 +1,141 @@
+export const ssr =
+  typeof window === 'undefined' || window.navigator.userAgent === 'ReactSnap';
+
+export const nativeConnection = !ssr && !!window.navigator.connection;
+
+// export const getScreenWidth = () => {
+//   if (ssr) return 0
+//   const devicePixelRatio = window.devicePixelRatio || 1
+//   const {screen} = window
+//   const {width} = screen
+//   // const angle = (screen.orientation && screen.orientation.angle) || 0
+//   // return Math.max(width, height)
+//   // const rotated = Math.floor(angle / 90) % 2 !== 0
+//   // return (rotated ? height : width) * devicePixelRatio
+//   return width * devicePixelRatio
+// }
+// export const screenWidth = getScreenWidth()
+
+export const guessMaxImageWidth = (dimensions, w) => {
+  if (ssr) return 0;
+
+  // Default to window object but don't use window as a default
+  // parameter so that this can be used on the server as well
+  if (!w) {
+    w = window;
+  }
+
+  const imgWidth = dimensions.width;
+
+  const {screen} = w;
+  const sWidth = screen.width;
+  const sHeight = screen.height;
+
+  const {documentElement} = document;
+  const windowWidth = w.innerWidth || documentElement.clientWidth;
+  const windowHeight = w.innerHeight || documentElement.clientHeight;
+  const devicePixelRatio = w.devicePixelRatio || 1;
+
+  const windowResized = sWidth > windowWidth;
+
+  let result;
+  if (windowResized) {
+    const body = document.getElementsByTagName('body')[0];
+    const scrollWidth = windowWidth - imgWidth;
+    const isScroll =
+      body.clientHeight > windowHeight || body.clientHeight > sHeight;
+    if (isScroll && scrollWidth <= 15) {
+      result = sWidth - scrollWidth;
+    } else {
+      result = (imgWidth / windowWidth) * sWidth;
+    }
+  } else {
+    result = imgWidth;
+  }
+
+  return result * devicePixelRatio;
+};
+
+export const bytesToSize = (bytes) => {
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) return 'n/a';
+  const i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)), 10);
+  if (i === 0) return `${bytes} ${sizes[i]}`;
+  return `${(bytes / 1024 ** i).toFixed(1)} ${sizes[i]}`;
+};
+
+// async function supportsWebp() {
+//   if (typeof createImageBitmap === 'undefined' || typeof fetch === 'undefined')
+//     return false
+//   return fetch(
+//     'data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=',
+//   )
+//     .then(response => response.blob())
+//     .then(blob => createImageBitmap(blob).then(() => true, () => false))
+// }
+// let webp = undefined
+// const webpPromise = supportsWebp()
+// webpPromise.then(x => (webp = x))
+// export default () => {
+//   if (webp === undefined) return webpPromise
+//   return {
+//     then: callback => callback(webp),
+//   }
+// }
+
+const detectWebpSupport = () => {
+  if (ssr) return false;
+  const elem = document.createElement('canvas');
+  if (elem.getContext?.('2d')) {
+    // was able or not to get WebP representation
+    return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+  } else {
+    // very old browser like IE 8, canvas not supported
+    return false;
+  }
+};
+
+export const supportsWebp = detectWebpSupport();
+
+const isWebp = (x) => x.format === 'webp' || x.src?.match(/\.webp($|\?.*)/i);
+
+// eslint-disable-next-line no-shadow
+export const selectSrc = ({srcSet, maxImageWidth, supportsWebp}) => {
+  if (srcSet.length === 0) throw new Error('Need at least one item in srcSet');
+  let supportedFormat, width;
+  if (supportsWebp) {
+    supportedFormat = srcSet.filter(isWebp);
+    if (supportedFormat.length === 0) supportedFormat = srcSet;
+  } else {
+    supportedFormat = srcSet.filter((x) => !isWebp(x));
+    if (supportedFormat.length === 0)
+      throw new Error('Need at least one supported format item in srcSet');
+  }
+  let widths = supportedFormat.filter((x) => x.width >= maxImageWidth);
+  if (widths.length === 0) {
+    widths = supportedFormat;
+    width = Math.max.apply(
+      null,
+      widths.map((x) => x.width),
+    );
+  } else {
+    width = Math.min.apply(
+      null,
+      widths.map((x) => x.width),
+    );
+  }
+  return supportedFormat.filter((x) => x.width === width)[0];
+};
+
+export const fallbackParams = ({srcSet, getUrl}) => {
+  if (!ssr) return {};
+  const notWebp = srcSet.filter((x) => !isWebp(x));
+  const first = notWebp[0];
+  return {
+    nsSrcSet: notWebp
+      .map((x) => `${getUrl ? getUrl(x) : x.src} ${x.width}w`)
+      .join(','),
+    nsSrc: getUrl ? getUrl(first) : first.src,
+    ssr,
+  };
+};

package/lib/theme/IdealImageLegacy/components/icons.d.ts

@@ -0,0 +1,14 @@
+import DownloadIcon from './Icon/Download';
+import OfflineIcon from './Icon/Offline';
+import WarningIcon from './Icon/Warning';
+import LoadingIcon from './Icon/Loading';
+declare const load: string, loading: string, loaded: string, error: string, noicon: string, offline: string;
+declare const _default: {
+    [load]: typeof DownloadIcon;
+    [loading]: typeof LoadingIcon;
+    [loaded]: null;
+    [error]: typeof WarningIcon;
+    [noicon]: null;
+    [offline]: typeof OfflineIcon;
+};
+export default _default;

package/lib/theme/IdealImageLegacy/components/icons.js

@@ -0,0 +1,16 @@
+import DownloadIcon from './Icon/Download';
+import OfflineIcon from './Icon/Offline';
+import WarningIcon from './Icon/Warning';
+import LoadingIcon from './Icon/Loading';
+import {icons} from './constants';
+
+const {load, loading, loaded, error, noicon, offline} = icons;
+
+export default {
+  [load]: DownloadIcon,
+  [loading]: LoadingIcon,
+  [loaded]: null,
+  [error]: WarningIcon,
+  [noicon]: null,
+  [offline]: OfflineIcon,
+};

package/lib/theme/IdealImageLegacy/components/loaders.d.ts

@@ -0,0 +1,11 @@
+/**
+ * returns new "promise" with cancel function combined
+ *
+ * @param {Promise} p1 - first "promise" with cancel
+ * @param {Promise} p2 - second "promise" with cancel
+ * @returns {Promise} - new "promise" with cancel
+ */
+export declare const combineCancel: (p1: Promise<any>, p2: Promise<any>) => Promise<any>;
+export declare const timeout: (threshold: any) => Promise<any>;
+export declare const imageLoader: (src: any) => Promise<any>;
+export declare const xhrLoader: (url: any, options: any) => Promise<any>;