react-imgix: initial types

types/react-imgix/index.d.ts

@@ -0,0 +1,249 @@
+// Type definitions for react-imgix 9.0
+// Project: https://github.com/imgix/react-imgix
+// Definitions by: Michael Haglund <https://github.com/hagmic>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+import * as React from 'react';
+
+type ImgixParamType = string | number | boolean;
+
+interface AdjustmentParams {
+  bri?: ImgixParamType;
+  con?: ImgixParamType;
+  exp?: ImgixParamType;
+  gam?: ImgixParamType;
+  high?: ImgixParamType;
+  hue?: ImgixParamType;
+  invert?: ImgixParamType;
+  sat?: ImgixParamType;
+  shad?: ImgixParamType;
+  sharp?: ImgixParamType;
+  usm?: ImgixParamType;
+  usmrad?: ImgixParamType;
+  vib?: ImgixParamType;
+}
+
+interface AutomaticParams   {
+  auto?: ImgixParamType;
+}
+
+interface BlendingParams {
+  'blend-align'?: ImgixParamType;
+  'blend-alpha'?: ImgixParamType;
+  'blend-crop'?: ImgixParamType;
+  'blend-fit'?: ImgixParamType;
+  'blend-mode'?: ImgixParamType;
+  'blend-pad'?: ImgixParamType;
+  'blend-size'?: ImgixParamType;
+  'blend-x'?: ImgixParamType;
+  'blend-y'?: ImgixParamType;
+  'blend'?: ImgixParamType;
+}
+
+interface BorderAndPaddingParams {
+  'border-radius-inner'?: ImgixParamType;
+  'border-radius'?: ImgixParamType;
+  border?: ImgixParamType;
+  pad?: ImgixParamType;
+}
+
+interface ColorPaletteParams {
+  colors?: ImgixParamType;
+  palette?: ImgixParamType;
+  prefix?: ImgixParamType;
+}
+
+interface FaceDetectionParams {
+  faceindex?: ImgixParamType;
+  facepad?: ImgixParamType;
+  faces?: ImgixParamType;
+}
+
+interface FillParams {
+  bg?: ImgixParamType;
+  'fill-color'?: ImgixParamType;
+  fill?: ImgixParamType;
+}
+
+interface FocalPointCropParams {
+  'fp-debug'?: ImgixParamType;
+  'fp-x'?: ImgixParamType;
+  'fp-y'?: ImgixParamType;
+  'fp-z'?: ImgixParamType;
+}
+
+interface FormatParams {
+  ch?: ImgixParamType;
+  chromasub?: ImgixParamType;
+  colorquant?: ImgixParamType;
+  cs?: ImgixParamType;
+  dl?: ImgixParamType;
+  dpi?: ImgixParamType;
+  fm?: ImgixParamType;
+  lossless?: ImgixParamType;
+  q?: ImgixParamType;
+}
+
+interface MaskImageParams {
+  'corner-radius'?: ImgixParamType;
+  mask?: ImgixParamType;
+}
+
+interface NoiseReductionParams {
+  nr?: ImgixParamType;
+  nrs?: ImgixParamType;
+}
+
+interface PDFParams {
+  page?: ImgixParamType;
+}
+
+interface PixelDensityParams {
+  dpr?: ImgixParamType;
+}
+
+interface RotationParams {
+  flip?: ImgixParamType;
+  orient?: ImgixParamType;
+  rot?: ImgixParamType;
+}
+
+interface SizeParams {
+  ar?: ImgixParamType;
+  crop?: ImgixParamType;
+  fit?: ImgixParamType;
+  h?: ImgixParamType;
+  'max-h'?: ImgixParamType;
+  'max-w'?: ImgixParamType;
+  'min-h'?: ImgixParamType;
+  'min-w'?: ImgixParamType;
+  rect?: ImgixParamType;
+  w?: ImgixParamType;
+}
+
+interface StylizeParams {
+  blur?: ImgixParamType;
+  'duotone-alpha'?: ImgixParamType;
+  duotone?: ImgixParamType;
+  htn?: ImgixParamType;
+  monochrome?: ImgixParamType;
+  px?: ImgixParamType;
+  sepia?: ImgixParamType;
+}
+
+interface TextParams {
+  'txt-align'?: ImgixParamType;
+  'txt-clip'?: ImgixParamType;
+  'txt-color'?: ImgixParamType;
+  'txt-fit'?: ImgixParamType;
+  'txt-font'?: ImgixParamType;
+  'txt-lig'?: ImgixParamType;
+  'txt-line-color'?: ImgixParamType;
+  'txt-line'?: ImgixParamType;
+  'txt-pad'?: ImgixParamType;
+  'txt-shad'?: ImgixParamType;
+  'txt-size'?: ImgixParamType;
+  'txt-width'?: ImgixParamType;
+  txt?: ImgixParamType;
+}
+
+interface TrimParams {
+  'trim-color'?: ImgixParamType;
+  'trim-md'?: ImgixParamType;
+  'trim-sd'?: ImgixParamType;
+  'trim-tol'?: ImgixParamType;
+  trim?: ImgixParamType;
+}
+
+interface TypesettingEndpointParams {
+  'txt-lead'?: ImgixParamType;
+  'txt-track'?: ImgixParamType;
+  '~text'?: ImgixParamType;
+}
+
+interface WatermarkParams {
+  'mark-align'?: ImgixParamType;
+  'mark-alpha'?: ImgixParamType;
+  'mark-base'?: ImgixParamType;
+  'mark-fit'?: ImgixParamType;
+  'mark-h'?: ImgixParamType;
+  'mark-pad'?: ImgixParamType;
+  'mark-scale'?: ImgixParamType;
+  'mark-w'?: ImgixParamType;
+  'mark-x'?: ImgixParamType;
+  'mark-y'?: ImgixParamType;
+  mark?: ImgixParamType;
+}
+
+type ImigixParams =
+  & AdjustmentParams
+  & AutomaticParams
+  & BlendingParams
+  & BorderAndPaddingParams
+  & ColorPaletteParams
+  & FaceDetectionParams
+  & FillParams
+  & FocalPointCropParams
+  & FormatParams
+  & MaskImageParams
+  & NoiseReductionParams
+  & PDFParams
+  & PixelDensityParams
+  & RotationParams
+  & SizeParams
+  & StylizeParams
+  & TextParams
+  & TrimParams
+  & TypesettingEndpointParams
+  & WatermarkParams
+;
+
+interface AttributeConfig {
+  src?: string;
+  srcSet?: string;
+  sizes?: string;
+}
+
+type ImgixHTMLAttributes = React.ImgHTMLAttributes<HTMLImageElement> | React.SourceHTMLAttributes<HTMLSourceElement>;
+
+interface CommonProps {
+  className?: string;
+  onMounted?: (ref?: React.RefObject<HTMLPictureElement | HTMLImageElement | HTMLSourceElement>) => void;
+  htmlAttributes?: ImgixHTMLAttributes;
+}
+
+interface SharedImigixAndSourceProps extends CommonProps {
+  src: string;
+  disableQualityByDPR?: boolean;
+  disableSrcSet?: boolean;
+  disableLibraryParam?: boolean;
+  imgixParams?: ImigixParams;
+  sizes?: string;
+  width?: number;
+  height?: number;
+  attributeConfig?: AttributeConfig;
+}
+
+export class Picture extends React.Component<React.PropsWithChildren<CommonProps>> {}
+export class Source extends React.Component<SharedImigixAndSourceProps> {}
+export function buildURL(src: string, imgixParams?: ImigixParams, options?: SharedImigixAndSourceProps): string;
+
+type Warnings = 'fallbackImage' | 'sizesAttribute' | 'invalidARFormat';
+
+export namespace PublicConfigAPI {
+  function disableWarning(name: Warnings): void;
+  function enableWarning(name: Warnings): void;
+}
+
+interface BackgroundProps {
+  src: string;
+  imgixParams?: ImigixParams;
+  className?: string;
+  disableLibraryParam?: boolean;
+  htmlAttributes?: ImgixHTMLAttributes;
+}
+
+export const Background: React.FunctionComponent<React.PropsWithChildren<BackgroundProps>>;
+
+declare class Imgix extends React.Component<SharedImigixAndSourceProps> {}
+export default Imgix;

types/react-imgix/react-imgix-tests.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Imgix, { Picture, Source, Background, buildURL, PublicConfigAPI } from 'react-imgix';
+
+const ImgixTest = () => (
+    <Imgix
+        src="https://.../image.png"
+        sizes="100vw"
+        width={100}
+        height={200}
+        imgixParams={{ ar: '16:9' }}
+        attributeConfig={{
+            src: 'data-src',
+            srcSet: 'data-srcset',
+            sizes: 'data-sizes',
+        }}
+        className="lazyload"
+        htmlAttributes={{
+            src: '...',
+        }}
+    />
+);
+
+const PictureTest = () => (
+    <Picture>
+        <Source src="https://.../image.png" width={400} htmlAttributes={{ media: '(min-width: 768px)' }} />
+        <Source src="https://.../image.png" width={200} htmlAttributes={{ media: '(min-width: 320px)' }} />
+        <Imgix src="https://.../image.png" width={100} />
+    </Picture>
+);
+
+const BackgroundTest = () => (
+    <Background src="https://.../image.png" imgixParams={{ w: 1920, h: 500 }} className="blog-title">
+        <h2>Blog Title</h2>
+    </Background>
+);
+
+buildURL('http://yourdomain.imgix.net/image.png', { w: 450, h: 100 });
+
+PublicConfigAPI.disableWarning('fallbackImage');
+PublicConfigAPI.enableWarning('sizesAttribute');
+PublicConfigAPI.disableWarning('unknown'); // $ExpectError
+PublicConfigAPI.enableWarning('unknown'); // $ExpectError

types/react-imgix/tsconfig.json

@@ -0,0 +1,25 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "jsx": "react",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-imgix-tests.tsx"
+    ]
+}

types/react-imgix/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }