Feat(core)!: refactor and upgrade

- remove non typescript-first dependencies
- upgrade all deps to latest versions
- refactor components to react.fc
- migrate to bun.sh

bunfig.toml

@@ -0,0 +1,3 @@
+[install]
+peer = true
+registry = "https://registry.npmjs.org"

global.d.ts

@@ -0,0 +1,153 @@
+import {
+  Component, ComponentType, ComponentClass, CSSProperties, ReactElement, Ref
+} from 'react'
+
+declare global {
+  // @see https://stackoverflow.com/questions/38383676/error-ts2339-property-connection-does-not-exist-on-type-navigator
+  interface Navigator extends NavigatorNetworkInformation {}
+  interface WorkerNavigator extends NavigatorNetworkInformation {}
+  interface NavigatorNetworkInformation {
+    readonly connection: NetworkInformation
+  }
+  type Megabit = number
+  type Millisecond = number
+  type EffectiveConnectionType = '2g' | '3g' | '4g' | 'slow-2g'
+  type ConnectionType =
+    | 'bluetooth'
+    | 'cellular'
+    | 'ethernet'
+    | 'mixed'
+    | 'none'
+    | 'other'
+    | 'unknown'
+    | 'wifi'
+    | 'wimax'
+  interface NetworkInformation extends EventTarget {
+    readonly type?: ConnectionType
+    readonly effectiveType?: EffectiveConnectionType
+    readonly downlinkMax?: Megabit
+    readonly downlink?: Megabit
+    readonly rtt?: Millisecond
+    readonly saveData?: boolean
+    onchange?: EventListener
+  }
+
+  type LoadingState = 'initial' | 'loading' | 'loaded' | 'error'
+
+  type IconKey =
+    | 'load'
+    | 'loading'
+    | 'loaded'
+    | 'error'
+    | 'noicon'
+    | 'offline'
+
+  interface SrcType {
+    width: number
+    src?: string
+    size?: number
+    format?: 'webp' | 'jpeg'
+  }
+
+  type ThemeKey = 'placeholder' | 'img' | 'icon' | 'noscript'
+
+  interface ImageProps {
+    /**
+     * This function decides what icon to show based on the current state of the component.
+     */
+    getIcon?: (state: LoadingState) => IconKey
+    /**
+     * This function decides what message to show based on the icon (returned from getIcon prop) and
+     * the current state of the component.
+     */
+    getMessage?: (icon: IconKey, state: LoadingState) => string
+    /**
+     * This function is called as soon as the component enters the viewport and is used to generate urls
+     * based on width and format if props.srcSet doesn't provide src field.
+     */
+    getUrl?: (srcType: SrcType) => string
+    /**
+     * The Height of the image in px.
+     */
+    height: number
+    /**
+     * This provides a map of the icons. By default, the component uses icons from material design,
+     * implemented as React components with the SVG element. You can customize icons
+     */
+    icons: Partial<Record<IconKey, ComponentType>>
+    /**
+     * This prop takes one of the 2 options, xhr and image.
+     * Read more about it:
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#cancel-download
+     */
+    loader?: 'xhr' | 'image'
+    /**
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#lqip
+     */
+    placeholder: {color: string} | {lqip: string}
+    /**
+     * This function decides if image should be downloaded automatically. The default function
+     * returns false for a 2g network, for a 3g network it decides based on props.threshold
+     * and for a 4g network it returns true by default.
+     */
+    shouldAutoDownload?: (
+      options: {
+        connection?: 'slow-2g' | '2g' | '3g' | '4g'
+        size?: number
+        threshold?: number
+        possiblySlowNetwork?: boolean
+      },
+    ) => boolean
+    /**
+     * This provides an array of sources of different format and size of the image.
+     * Read more about it:
+     * https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md#srcset
+     */
+    srcSet: SrcType[]
+    /**
+     * This provides a theme to the component. By default, the component uses inline styles,
+     * but it is also possible to use CSS modules and override all styles.
+     */
+    theme?: Partial<Record<ThemeKey, string | CSSProperties>>
+    /**
+     * Tells how much to wait in milliseconds until consider the download to be slow.
+     */
+    threshold?: number
+    /**
+     * Width of the image in px.
+     */
+    width: number
+  }
+
+  interface MediaProps extends Required<ImageProps> {
+    /** Color of the icon */
+    iconColor?: string;
+    /** Size of the icon in px */
+    iconSize?: number,
+    /** display icon */
+    icon: IconKey
+    /** Alternative text */
+    alt: string;
+    /** React's style attribute for root element of the component */
+    style: Record<string, any>,
+    /** React's className attribute for root element of the component */
+    className: string,
+    /** On click handler */
+    onClick: (event: MouseEvent<HTMLDivElement, MouseEvent>): void;
+    /** callback to get dimensions of the placeholder */
+    onDimensions: Function,
+    /** message to show below the icon */
+    message: ReactElement,
+    /** reference for Waypoint */
+    innerRef?: Ref<HTMLDivElement> | undefined,
+    /** noscript image src */
+    nsSrc: string,
+    /** noscript image srcSet */
+    nsSrcSet: string,
+  }
+  }
+
+  type IdealImageComponent = ComponentClass<ImageProps>
+
+  const IdealImage: IdealImageComponent
+}

package.json

@@ -4,24 +4,21 @@
   "description": "Adaptive image component",
   "main": "dist/index.js",
   "typings": "index.d.ts",
-  "engines": {
-    "node": "> 4",
-    "npm": "> 3"
-  },
   "scripts": {
     "add-contributor": "kcd-scripts contributors add",
     "build": "kcd-scripts build",
+    "check:upgrades": "bunx ncu -u",
+    "deploy": "gh-pages -d styleguide",
     "lint": "kcd-scripts lint",
-    "test": "kcd-scripts test",
-    "test:update": "npm test -- --updateSnapshot --coverage",
-    "test:ts": "tsc --noEmit -p ./tsconfig.json",
-    "validate": "npm run test:ts && kcd-scripts validate",
-    "setup": "npm install && npm run validate -s",
     "precommit": "kcd-scripts precommit",
-    "styleguide": "styleguidist server",
-    "styleguide:build": "styleguidist build",
     "predeploy": "styleguidist build",
-    "deploy": "gh-pages -d styleguide"
+    "setup": "bun install && bun run validate -s",
+    "styleguide:build": "styleguidist build",
+    "styleguide": "styleguidist server",
+    "test:ts": "tsc --noEmit -p ./tsconfig.json",
+    "test:update": "bun test -- --updateSnapshot --coverage",
+    "test": "kcd-scripts test",
+    "validate": "bun run test:ts && kcd-scripts validate"
   },
   "files": [
     "dist"
@@ -30,29 +27,21 @@
   "author": "stereobooster <[email protected]>",
   "license": "MIT",
   "peerDependencies": {
-    "prop-types": ">=15",
-    "react": ">=0.14.x",
-    "react-waypoint": ">=8.0.0"
+    "react": ">=0.18.x",
+    "react-waypoint": ">=10.0.0"
   },
   "devDependencies": {
-    "@types/react": "16.4.18",
-    "babel-loader": "7.1.5",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.0.0",
-    "@babel/preset-env": "7.1.0",
-    "@babel/preset-react": "7.0.0",
-    "gh-pages": "2.0.1",
-    "jest-canvas-mock": "1.1.0",
-    "kcd-scripts": "0.45.0",
-    "prop-types": "15.6.2",
-    "react": "16.6.0",
-    "react-dom": "16.6.0",
-    "react-styleguidist": "8.0.2",
-    "react-test-renderer": "16.6.0",
-    "react-testing-library": "5.2.3",
-    "react-waypoint": "8.0.3",
-    "typescript": "3.1.5",
-    "webpack": "4.24.0"
+    "@types/react": "18.2.6",
+    "bun-types": "^0.5.8",
+    "gh-pages": "5.0.0",
+    "kcd-scripts": "13.0.0",
+    "npm-check-updates": "16.10.12",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-styleguidist": "13.1.1",
+    "react-waypoint": "10.3.0",
+    "typescript": "^5.0.4",
+    "webpack": "5.82.1"
   },
   "eslintConfig": {
     "extends": "./node_modules/kcd-scripts/eslint.js",

src/__tests__/__snapshots__/IdealImageWithDefaults.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`IdealImageWithDefaults Renders a snapshot that is good 1`] = `
+<div
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  style={
+    {
+      backgroundColor: blue,
+      backgroundRepeat: no-repeat,
+      backgroundSize: cover,
+      position: relative,
+    }
+  }
+>
+  <svg
+    height={2095}
+    style={
+      {
+        height: auto,
+        marginBottom: -4px,
+        maxWidth: 100%,
+        width: 100%,
+      }
+    }
+    width={3500}
+  />
+</div>
+`;