@sproutsocial/seeds-react-image 1.0.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.0.2
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-image/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     3.88 KB
+CJS dist/index.js.map 5.26 KB
+CJS ⚡️ Build success in 81ms
+ESM dist/esm/index.js     2.09 KB
+ESM dist/esm/index.js.map 5.20 KB
+ESM ⚡️ Build success in 83ms
+DTS Build start
+DTS ⚡️ Build success in 22476ms
+DTS dist/index.d.ts  1.50 KB
+DTS dist/index.d.mts 1.50 KB
+Done in 26.15s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-image
+
+## 1.0.0
+
+### Major Changes
+
+- 426f572: Migrated Avatar and Image components into their own packages

package/dist/esm/index.js

@@ -0,0 +1,103 @@
+// src/Image.tsx
+import * as React from "react";
+
+// src/styles.ts
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+var ImageContainer = styled.img.attrs({
+  className: "Image"
+})`
+  display: block;
+
+  ${(props) => props.isLoading && css`
+      visibility: hidden;
+    `}
+
+  ${COMMON}
+  ${LAYOUT}
+`;
+var styles_default = ImageContainer;
+
+// src/Image.tsx
+import { jsx } from "react/jsx-runtime";
+var noop = () => {
+};
+var Image = class extends React.Component {
+  static defaultProps = {
+    title: "",
+    onError: noop,
+    onClick: noop,
+    onLoad: noop
+  };
+  state = {
+    didError: false,
+    didLoad: false,
+    imageUrl: this.props.src
+  };
+  imageRef;
+  componentDidMount() {
+    if (this.imageRef) {
+      this.setState({
+        didLoad: this.imageRef.complete
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.src !== prevProps.src) {
+      this.setState({
+        didError: false,
+        didLoad: false,
+        imageUrl: this.props.src
+      });
+    }
+  }
+  onError = (e) => {
+    if (!this.state.didError && this.props.defaultImage) {
+      this.setState({
+        didError: true,
+        imageUrl: this.props.defaultImage
+      });
+    }
+    this.props.onError(e);
+  };
+  onLoad = () => {
+    this.setState({
+      didLoad: true
+    });
+    this.props.onLoad();
+  };
+  onClick = () => {
+    this.props.onClick();
+  };
+  render() {
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } = this.props;
+    return /* @__PURE__ */ jsx(
+      styles_default,
+      {
+        isLoading: !this.state.didLoad,
+        ref: (img) => this.imageRef = img,
+        onClick: this.onClick,
+        src: this.state.imageUrl,
+        onError: (e) => this.onError(e),
+        onLoad: this.onLoad,
+        alt,
+        title,
+        "data-qa-image": title ? title : alt ? alt : "",
+        "data-qa-image-src": src || "",
+        ...qa,
+        ...rest
+      }
+    );
+  }
+};
+
+// src/ImageTypes.ts
+import "react";
+
+// src/index.ts
+var src_default = Image;
+export {
+  Image,
+  src_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Image.tsx","../../src/styles.ts","../../src/ImageTypes.ts","../../src/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n      this.props;\n    return (\n      <ImageContainer\n        isLoading={!this.state.didLoad}\n        ref={(img) => (this.imageRef = img)}\n        onClick={this.onClick}\n        src={this.state.imageUrl}\n        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n          this.onError(e)\n        }\n        onLoad={this.onLoad}\n        alt={alt}\n        title={title}\n        data-qa-image={title ? title : alt ? alt : \"\"}\n        data-qa-image-src={src || \"\"}\n        {...(qa as any)}\n        {...rest}\n      />\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      visibility: hidden;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n","import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,UAAU,WAAW;AAC5B,SAAS,QAAQ,cAAc;AAK/B,IAAM,iBAAiB,OAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,MAAM;AAAA,IACN,MAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,OAAuB;;;ACEvB,IAAO,cAAQ;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeImageProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"img">, "color" | "height" | "width"> {
+    src: string;
+    /** Alt text is required for non-decorative images */
+    alt: string;
+    title: string;
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onClick: () => void;
+    /** A URL for a default image to load if the source image is not available */
+    defaultImage?: string;
+    onLoad: () => void;
+    qa?: object;
+}
+
+type TypeState = {
+    didError: boolean;
+    didLoad: boolean;
+    imageUrl: string;
+};
+declare class Image extends React.Component<TypeImageProps, TypeState> {
+    static defaultProps: {
+        title: string;
+        onError: () => void;
+        onClick: () => void;
+        onLoad: () => void;
+    };
+    state: {
+        didError: boolean;
+        didLoad: boolean;
+        imageUrl: string;
+    };
+    imageRef?: HTMLImageElement | null;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TypeImageProps): void;
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad: () => void;
+    onClick: () => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Image, type TypeImageProps, Image as default };

package/dist/index.d.ts

@@ -0,0 +1,44 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps } from '@sproutsocial/seeds-react-system-props';
+
+interface TypeImageProps extends TypeStyledComponentsCommonProps, TypeSystemCommonProps, TypeSystemLayoutProps, Omit<React.ComponentPropsWithoutRef<"img">, "color" | "height" | "width"> {
+    src: string;
+    /** Alt text is required for non-decorative images */
+    alt: string;
+    title: string;
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onClick: () => void;
+    /** A URL for a default image to load if the source image is not available */
+    defaultImage?: string;
+    onLoad: () => void;
+    qa?: object;
+}
+
+type TypeState = {
+    didError: boolean;
+    didLoad: boolean;
+    imageUrl: string;
+};
+declare class Image extends React.Component<TypeImageProps, TypeState> {
+    static defaultProps: {
+        title: string;
+        onError: () => void;
+        onClick: () => void;
+        onLoad: () => void;
+    };
+    state: {
+        didError: boolean;
+        didLoad: boolean;
+        imageUrl: string;
+    };
+    imageRef?: HTMLImageElement | null;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: TypeImageProps): void;
+    onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad: () => void;
+    onClick: () => void;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
+export { Image, type TypeImageProps, Image as default };

package/dist/index.js

@@ -0,0 +1,140 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Image: () => Image,
+  default: () => src_default
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/Image.tsx
+var React = __toESM(require("react"));
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+var ImageContainer = import_styled_components.default.img.attrs({
+  className: "Image"
+})`
+  display: block;
+
+  ${(props) => props.isLoading && import_styled_components.css`
+      visibility: hidden;
+    `}
+
+  ${import_seeds_react_system_props.COMMON}
+  ${import_seeds_react_system_props.LAYOUT}
+`;
+var styles_default = ImageContainer;
+
+// src/Image.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var noop = () => {
+};
+var Image = class extends React.Component {
+  static defaultProps = {
+    title: "",
+    onError: noop,
+    onClick: noop,
+    onLoad: noop
+  };
+  state = {
+    didError: false,
+    didLoad: false,
+    imageUrl: this.props.src
+  };
+  imageRef;
+  componentDidMount() {
+    if (this.imageRef) {
+      this.setState({
+        didLoad: this.imageRef.complete
+      });
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.src !== prevProps.src) {
+      this.setState({
+        didError: false,
+        didLoad: false,
+        imageUrl: this.props.src
+      });
+    }
+  }
+  onError = (e) => {
+    if (!this.state.didError && this.props.defaultImage) {
+      this.setState({
+        didError: true,
+        imageUrl: this.props.defaultImage
+      });
+    }
+    this.props.onError(e);
+  };
+  onLoad = () => {
+    this.setState({
+      didLoad: true
+    });
+    this.props.onLoad();
+  };
+  onClick = () => {
+    this.props.onClick();
+  };
+  render() {
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } = this.props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      styles_default,
+      {
+        isLoading: !this.state.didLoad,
+        ref: (img) => this.imageRef = img,
+        onClick: this.onClick,
+        src: this.state.imageUrl,
+        onError: (e) => this.onError(e),
+        onLoad: this.onLoad,
+        alt,
+        title,
+        "data-qa-image": title ? title : alt ? alt : "",
+        "data-qa-image-src": src || "",
+        ...qa,
+        ...rest
+      }
+    );
+  }
+};
+
+// src/ImageTypes.ts
+var React2 = require("react");
+
+// src/index.ts
+var src_default = Image;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Image.tsx","../src/styles.ts","../src/ImageTypes.ts"],"sourcesContent":["import Image from \"./Image\";\n\nexport default Image;\nexport { Image };\nexport * from \"./ImageTypes\";\n","import * as React from \"react\";\nimport ImageContainer from \"./styles\";\nimport type { TypeImageProps } from \"./ImageTypes\";\n\ntype TypeState = {\n  didError: boolean;\n  didLoad: boolean;\n  imageUrl: string;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nexport default class Image extends React.Component<TypeImageProps, TypeState> {\n  static defaultProps = {\n    title: \"\",\n    onError: noop,\n    onClick: noop,\n    onLoad: noop,\n  };\n\n  override state = {\n    didError: false,\n    didLoad: false,\n    imageUrl: this.props.src,\n  };\n\n  imageRef?: HTMLImageElement | null;\n\n  override componentDidMount() {\n    // eslint-disable-next-line react/no-did-mount-set-state\n    if (this.imageRef) {\n      this.setState({\n        didLoad: this.imageRef.complete,\n      });\n    }\n  }\n\n  override componentDidUpdate(prevProps: TypeImageProps) {\n    if (this.props.src !== prevProps.src) {\n      this.setState({\n        didError: false,\n        didLoad: false,\n        imageUrl: this.props.src,\n      });\n    }\n  }\n\n  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {\n    if (!this.state.didError && this.props.defaultImage) {\n      this.setState({\n        didError: true,\n        imageUrl: this.props.defaultImage,\n      });\n    }\n\n    this.props.onError(e);\n  };\n\n  onLoad = () => {\n    this.setState({\n      didLoad: true,\n    });\n    this.props.onLoad();\n  };\n\n  onClick = () => {\n    this.props.onClick();\n  };\n\n  override render() {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =\n      this.props;\n    return (\n      <ImageContainer\n        isLoading={!this.state.didLoad}\n        ref={(img) => (this.imageRef = img)}\n        onClick={this.onClick}\n        src={this.state.imageUrl}\n        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>\n          this.onError(e)\n        }\n        onLoad={this.onLoad}\n        alt={alt}\n        title={title}\n        data-qa-image={title ? title : alt ? alt : \"\"}\n        data-qa-image-src={src || \"\"}\n        {...(qa as any)}\n        {...rest}\n      />\n    );\n  }\n}\n","import styled, { css } from \"styled-components\";\nimport { COMMON, LAYOUT } from \"@sproutsocial/seeds-react-system-props\";\n\ninterface ImageContainerProps {\n  isLoading?: boolean;\n}\nconst ImageContainer = styled.img.attrs({\n  className: \"Image\",\n})<ImageContainerProps>`\n  display: block;\n\n  ${(props) =>\n    props.isLoading &&\n    css`\n      visibility: hidden;\n    `}\n\n  ${COMMON}\n  ${LAYOUT}\n`;\n\nexport default ImageContainer;\n","import * as React from \"react\";\nimport type {\n  TypeSystemCommonProps,\n  TypeSystemLayoutProps,\n  TypeStyledComponentsCommonProps,\n} from \"@sproutsocial/seeds-react-system-props\";\n\nexport interface TypeImageProps\n  extends TypeStyledComponentsCommonProps,\n    TypeSystemCommonProps,\n    TypeSystemLayoutProps,\n    Omit<React.ComponentPropsWithoutRef<\"img\">, \"color\" | \"height\" | \"width\"> {\n  src: string;\n\n  /** Alt text is required for non-decorative images */\n  alt: string;\n  title: string;\n  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onClick: () => void;\n\n  /** A URL for a default image to load if the source image is not available */\n  defaultImage?: string;\n  onLoad: () => void;\n  qa?: object;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAA4B;AAC5B,sCAA+B;AAK/B,IAAM,iBAAiB,yBAAAA,QAAO,IAAI,MAAM;AAAA,EACtC,WAAW;AACb,CAAC;AAAA;AAAA;AAAA,IAGG,CAAC,UACD,MAAM,aACN;AAAA;AAAA,KAEC;AAAA;AAAA,IAED,sCAAM;AAAA,IACN,sCAAM;AAAA;AAGV,IAAO,iBAAQ;;;ADsDT;AAhEN,IAAM,OAAO,MAAM;AAAC;AAEpB,IAAqB,QAArB,cAAyC,gBAAqC;AAAA,EAC5E,OAAO,eAAe;AAAA,IACpB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EAES,QAAQ;AAAA,IACf,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU,KAAK,MAAM;AAAA,EACvB;AAAA,EAEA;AAAA,EAES,oBAAoB;AAE3B,QAAI,KAAK,UAAU;AACjB,WAAK,SAAS;AAAA,QACZ,SAAS,KAAK,SAAS;AAAA,MACzB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAES,mBAAmB,WAA2B;AACrD,QAAI,KAAK,MAAM,QAAQ,UAAU,KAAK;AACpC,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,SAAS;AAAA,QACT,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEA,UAAU,CAAC,MAAqD;AAC9D,QAAI,CAAC,KAAK,MAAM,YAAY,KAAK,MAAM,cAAc;AACnD,WAAK,SAAS;AAAA,QACZ,UAAU;AAAA,QACV,UAAU,KAAK,MAAM;AAAA,MACvB,CAAC;AAAA,IACH;AAEA,SAAK,MAAM,QAAQ,CAAC;AAAA,EACtB;AAAA,EAEA,SAAS,MAAM;AACb,SAAK,SAAS;AAAA,MACZ,SAAS;AAAA,IACX,CAAC;AACD,SAAK,MAAM,OAAO;AAAA,EACpB;AAAA,EAEA,UAAU,MAAM;AACd,SAAK,MAAM,QAAQ;AAAA,EACrB;AAAA,EAES,SAAS;AAEhB,UAAM,EAAE,KAAK,OAAO,SAAS,SAAS,QAAQ,KAAK,IAAI,GAAG,KAAK,IAC7D,KAAK;AACP,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,CAAC,KAAK,MAAM;AAAA,QACvB,KAAK,CAAC,QAAS,KAAK,WAAW;AAAA,QAC/B,SAAS,KAAK;AAAA,QACd,KAAK,KAAK,MAAM;AAAA,QAChB,SAAS,CAAC,MACR,KAAK,QAAQ,CAAC;AAAA,QAEhB,QAAQ,KAAK;AAAA,QACb;AAAA,QACA;AAAA,QACA,iBAAe,QAAQ,QAAQ,MAAM,MAAM;AAAA,QAC3C,qBAAmB,OAAO;AAAA,QACzB,GAAI;AAAA,QACJ,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;;;AE7FA,IAAAC,SAAuB;;;AHEvB,IAAO,cAAQ;","names":["styled","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-image",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@sproutsocial/seeds-react-image",
+  "version": "1.0.0",
+  "description": "Seeds React Image",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^*",
+    "@sproutsocial/seeds-react-system-props": "^*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.0.2",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Image.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import Image from "./Image";
+
+const meta: Meta<typeof Image> = {
+  title: "Components/Image",
+  component: Image,
+};
+export default meta;
+
+type Story = StoryObj<typeof Image>;
+
+const backupImgData =
+  "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbDpzcGFjZT0icHJlc2VydmUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDY0IDY0IiB2aWV3Qm94PSIwIDAgNjQgNjQiPgogIDxwYXRoIGQ9Im0yOSAzMiAxMy4yIDkuN2MuNC4zLjYuOS4yIDEuNC00LjYgNi40LTEyLjggOS41LTIwLjcgNy4yLTYuOC0xLjktMTIuMS03LjctMTMuNC0xNC43QzYuMSAyMy42IDE1LjQgMTMgMjcgMTNjNi4zIDAgMTIuMiAzLjEgMTUuNyA4LjMuMy40LjIgMS4xLS4zIDEuNEwyOSAzMnoiIHN0eWxlPSJmaWxsOiNkOWRjZTEiLz4KICA8Y2lyY2xlIGN4PSI0MyIgY3k9IjMyIiByPSIzIiBjbGFzcz0ic3QwIi8+CiAgPGNpcmNsZSBjeD0iNTMiIGN5PSIzMiIgcj0iMyIgY2xhc3M9InN0MCIvPgogIDxjaXJjbGUgY3g9IjI4IiBjeT0iMjMiIHI9IjMiIHN0eWxlPSJmaWxsOiNmZmYiLz4KPC9zdmc+Cg==";
+
+export const Example: Story = {
+  args: {
+    src: "http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg",
+    alt: "I know when that hotline bling!",
+  },
+};
+
+export const ExampleWithFallback: Story = {
+  args: {
+    width: 1 / 2,
+    src: "",
+    alt: "I know when that hotline bling!",
+    defaultImage: backupImgData,
+  },
+};

package/src/Image.tsx

@@ -0,0 +1,94 @@
+import * as React from "react";
+import ImageContainer from "./styles";
+import type { TypeImageProps } from "./ImageTypes";
+
+type TypeState = {
+  didError: boolean;
+  didLoad: boolean;
+  imageUrl: string;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
+export default class Image extends React.Component<TypeImageProps, TypeState> {
+  static defaultProps = {
+    title: "",
+    onError: noop,
+    onClick: noop,
+    onLoad: noop,
+  };
+
+  override state = {
+    didError: false,
+    didLoad: false,
+    imageUrl: this.props.src,
+  };
+
+  imageRef?: HTMLImageElement | null;
+
+  override componentDidMount() {
+    // eslint-disable-next-line react/no-did-mount-set-state
+    if (this.imageRef) {
+      this.setState({
+        didLoad: this.imageRef.complete,
+      });
+    }
+  }
+
+  override componentDidUpdate(prevProps: TypeImageProps) {
+    if (this.props.src !== prevProps.src) {
+      this.setState({
+        didError: false,
+        didLoad: false,
+        imageUrl: this.props.src,
+      });
+    }
+  }
+
+  onError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+    if (!this.state.didError && this.props.defaultImage) {
+      this.setState({
+        didError: true,
+        imageUrl: this.props.defaultImage,
+      });
+    }
+
+    this.props.onError(e);
+  };
+
+  onLoad = () => {
+    this.setState({
+      didLoad: true,
+    });
+    this.props.onLoad();
+  };
+
+  onClick = () => {
+    this.props.onClick();
+  };
+
+  override render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { alt, title, onClick, onError, onLoad, src, qa, ...rest } =
+      this.props;
+    return (
+      <ImageContainer
+        isLoading={!this.state.didLoad}
+        ref={(img) => (this.imageRef = img)}
+        onClick={this.onClick}
+        src={this.state.imageUrl}
+        onError={(e: React.SyntheticEvent<HTMLImageElement, Event>) =>
+          this.onError(e)
+        }
+        onLoad={this.onLoad}
+        alt={alt}
+        title={title}
+        data-qa-image={title ? title : alt ? alt : ""}
+        data-qa-image-src={src || ""}
+        {...(qa as any)}
+        {...rest}
+      />
+    );
+  }
+}

package/src/ImageTypes.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type {
+  TypeSystemCommonProps,
+  TypeSystemLayoutProps,
+  TypeStyledComponentsCommonProps,
+} from "@sproutsocial/seeds-react-system-props";
+
+export interface TypeImageProps
+  extends TypeStyledComponentsCommonProps,
+    TypeSystemCommonProps,
+    TypeSystemLayoutProps,
+    Omit<React.ComponentPropsWithoutRef<"img">, "color" | "height" | "width"> {
+  src: string;
+
+  /** Alt text is required for non-decorative images */
+  alt: string;
+  title: string;
+  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+  onClick: () => void;
+
+  /** A URL for a default image to load if the source image is not available */
+  defaultImage?: string;
+  onLoad: () => void;
+  qa?: object;
+}

package/src/__tests__/Image.typetest.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { render } from "@sproutsocial/seeds-react-testing-library";
+import Image from "../Image";
+
+describe.skip("Image/types", () => {
+  it("should render valid props", () => {
+    render(
+      <>
+        <Image
+          src="http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg"
+          alt="I know when that hotline bling!"
+        />
+        <Image
+          width={1 / 2}
+          src="https://iwontload.abc/image-doesnt-exist.jpg"
+          alt="I know when that hotline bling!"
+          defaultImage="https://api.time.com/wp-content/uploads/2022/12/time-person-of-the-year-2022-volodymyr-zelensky-3.jpg?quality=75&w=400"
+        />
+        {/* @ts-expect-error - test that missing src is rejected */}
+        <Image alt="I know when that hotline bling!" />
+        {/* @ts-expect-error - test that missing alt is rejected */}
+        <Image src="http://static01.nyt.com/images/2015/10/24/arts/24drakeart2/24drakeart2-master675.jpg" />
+      </>
+    );
+  });
+});

package/src/__tests__/features.test.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import {
+  render,
+  fireEvent,
+  screen,
+} from "@sproutsocial/seeds-react-testing-library";
+import Image from "../Image";
+
+describe("Image", () => {
+  it("should render properly", () => {
+    const { container } = render(
+      <Image
+        alt="image"
+        className="foo"
+        src="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+      />
+    );
+    expect(container).toBeTruthy();
+  });
+
+  it("should find broken image src URL and render defaultImage (fallback) src URL", () => {
+    render(
+      <Image
+        className="foo"
+        src="https://iwontload.abc/image-doesnt-exist.jpg"
+        alt="Broken Image"
+        defaultImage="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+      />
+    );
+    const img = screen.getByDataQaLabel({
+      "image-src": "https://iwontload.abc/image-doesnt-exist.jpg",
+    });
+    expect(img).toHaveAttribute(
+      "src",
+      "https://iwontload.abc/image-doesnt-exist.jpg"
+    );
+    fireEvent.error(img);
+    expect(img).toHaveAttribute(
+      "src",
+      "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+    );
+  });
+
+  it("should attempt to load and display valid image", () => {
+    render(
+      <Image
+        className="foo"
+        src="http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+        alt="Broken Image"
+        defaultImage="https://iwontload.abc/image-doesnt-exist.jpg"
+      />
+    );
+    const img = screen.getByDataQaLabel({
+      "image-src": "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif",
+    });
+    fireEvent.load(img);
+    expect(img).toHaveAttribute(
+      "src",
+      "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif"
+    );
+  });
+
+  it("should update when the src prop changes", () => {
+    const src1 = "http://media3.giphy.com/media/jbxQLpOKN2URa/giphy.gif";
+    const src2 = "https://media3.giphy.com/media/gYZ7qO81g4dt6/giphy.gif";
+    const { rerender } = render(
+      <Image
+        className="foo"
+        src={src1}
+        alt="Broken Image"
+        defaultImage="https://iwontload.abc/image-doesnt-exist.jpg"
+      />
+    );
+    const img = screen.getByDataQaLabel({
+      "image-src": src1,
+    });
+    fireEvent.load(img);
+    expect(img).toHaveAttribute("src", src1);
+
+    rerender(
+      <Image
+        className="foo"
+        src={src2}
+        alt="Broken Image"
+        defaultImage="https://iwontload.abc/image-doesnt-exist.jpg"
+      />
+    );
+    const img2 = screen.getByDataQaLabel({
+      "image-src": src2,
+    });
+    fireEvent.load(img2);
+    expect(img).toHaveAttribute("src", src2);
+  });
+});

package/src/index.ts

@@ -0,0 +1,5 @@
+import Image from "./Image";
+
+export default Image;
+export { Image };
+export * from "./ImageTypes";

package/src/styles.ts

@@ -0,0 +1,22 @@
+import styled, { css } from "styled-components";
+import { COMMON, LAYOUT } from "@sproutsocial/seeds-react-system-props";
+
+interface ImageContainerProps {
+  isLoading?: boolean;
+}
+const ImageContainer = styled.img.attrs({
+  className: "Image",
+})<ImageContainerProps>`
+  display: block;
+
+  ${(props) =>
+    props.isLoading &&
+    css`
+      visibility: hidden;
+    `}
+
+  ${COMMON}
+  ${LAYOUT}
+`;
+
+export default ImageContainer;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));