36615 primary png gif

.babelrc

@@ -1,12 +1,3 @@
 {
-  "presets": [
-    "@babel/preset-env",
-    "@babel/preset-react",
-    [
-      "react-app",
-      {
-        "absoluteRuntime": false
-      }
-    ]
-  ]
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
 }

.circleci/config.yml

@@ -34,6 +34,6 @@ jobs:
           key: v1-dependencies-{{ checksum "package.json" }}
 
       # run tests!
-      - run: npm run jest
+      - run: npm run test:ci
       - run: npm run eslint
       - run: npm run prettier

package.json

@@ -1,7 +1,7 @@
 {
   "name": "apm-mimas",
   "description": "A React component that takes an image endpoint from APM's APIs and returns a proper image with srcset.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",
@@ -20,16 +20,14 @@
     "url": "https://github.com/APMG/apm-mimas"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,__snapshots__",
-    "test": "react-scripts test",
-    "jest": "jest",
-    "eject": "react-scripts eject",
-    "eslint": "eslint ./src/**/**.js",
-    "eslint:fix": "eslint ./src/**/**.js --fix",
-    "prettier": "prettier --check './src/**/**.js'",
-    "prettier:fix": "prettier --check './src/**/**.js' --write",
-    "hook:setup": "sh setup-hooks.sh"
+    "build": "webpack --mode production",
+    "start": "webpack --mode development",
+    "test": "jest --watch",
+    "test:ci": "jest",
+    "storybook": "start-storybook -p 9001 -c .storybook",
+    "eslint": "eslint .",
+    "prettier": "prettier --check '**/**.js'",
+    "prettier:fix": "prettier --check '**/**.js' --write"
   },
   "husky": {
     "hooks": {
@@ -47,19 +45,25 @@
     "not op_mini all"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "classnames": "^2.2.6",
     "eslint": "^5.13.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
+    "jest": "^24.7.1",
     "jest-prop-type-error": "^1.1.0",
     "prettier": "1.16.4",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
-    "react-scripts": "2.1.5",
-    "react-testing-library": "^5.8.0"
+    "react-testing-library": "^5.8.0",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3"
   },
   "dependencies": {
     "husky": "^1.3.1"

src/lib/Image/Image.js → src/Image/Image.js

@@ -4,7 +4,12 @@ import PropTypes from 'prop-types';
 // Ideally, this component will take in an image object formatted by our images API and spit out an image with a proper srcset. However, I also thought I should provide a couple of fallback options, in case you want to use an image from somewhere else entirely: fallbackSrcSet and fallbackSrc. The last one will just create a normal img tag, so I really don't recommend it.
 
 function generateSrcSet(imageProps, props) {
-  props.image.aspect_ratios[props.aspectRatio].instances.forEach(
+  let aspectRatio =
+    props.image.aspect_ratios[props.aspectRatio] !== null
+      ? props.aspectRatio
+      : 'uncropped';
+
+  props.image.aspect_ratios[aspectRatio].instances.forEach(
     (image, i, dataSet) => {
       let set = `${image.url} ${image.width}w`;
       if (i !== dataSet.length - 1) {

src/Image/testdata/gif.json

@@ -0,0 +1,25 @@
+{
+  "aspect_ratios": {
+    "square": null,
+    "uncropped": {
+      "instances": [
+        {
+          "url": "https://img.apmcdn.org/dev/4211eee93770e5c0d2b2dab5523f7457a34796c1/uncropped/fb16d0-2019-02-arrested-devo-pants.gif",
+          "width": 500,
+          "height": 234,
+          "__typename": "Instance"
+        }
+      ],
+      "__typename": "AspectRatio"
+    },
+    "__typename": "AspectRatioList"
+  },
+  "contentArea": "TBTL",
+  "dateTaken": null,
+  "dateline": "",
+  "fallback": "https://img.apmcdn.org/dev/4211eee93770e5c0d2b2dab5523f7457a34796c1/uncropped/fb16d0-2019-02-arrested-devo-pants.gif",
+  "longCaption": "Arrested Devo Pants",
+  "shortCaption": "Arrested Devo Pants",
+  "xid": 300227,
+  "__typename": "Image"
+}

src/index.js

@@ -1,19 +1,2 @@
-import React from 'react';
-import { render } from 'react-dom';
-import { Image } from './lib';
-import { image } from './lib/Image/testdata/image';
-
-const App = () => (
-  <div>
-    <h1>Hello React</h1>
-    <Image
-      image={image}
-      aspectRatio="square"
-      alt="this image is from our test data"
-      elementClass="exampleImage"
-      sizes="(min-width: 1000px) 1000px"
-    />
-  </div>
-);
-
-render(<App />, document.getElementById('root'));
+import Image from './Image/Image';
+export { Image };

webpack.config.js

@@ -0,0 +1,23 @@
+const path = require('path');
+
+module.exports = {
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve('dist'),
+    filename: 'index.js',
+    libraryTarget: 'commonjs2'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /(node_modules)/,
+        use: 'babel-loader'
+      }
+    ]
+  },
+  resolve: {
+    extensions: ['.js']
+  }
+};