fix(sanity-plugin): make missing images icon

good-idea · Jan 7, 2020 · ae2f537 · ae2f537
1 parent cf97051
commit ae2f537
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 34 deletions.
diff --git a/packages/sanity-plugin/src/ShopifyIcon.tsx b/packages/sanity-plugin/src/ShopifyIcon.tsx
diff --git a/packages/sanity-plugin/src/icons/MissingImage.tsx b/packages/sanity-plugin/src/icons/MissingImage.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { AiOutlineQuestionCircle } from 'react-icons/ai'
+
+const imageWrapperStyles = {
+  background: '#f0f0f0',
+  width: '100%',
+  height: '100%',
+  borderRadius: '3px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  color: '#acacac'
+}
+
+export const MissingImage = () => (
+  <div style={imageWrapperStyles}>
+    <AiOutlineQuestionCircle fill="currentColor" />
+  </div>
+)
diff --git a/packages/sanity-plugin/src/icons/ShopifyIcon.tsx b/packages/sanity-plugin/src/icons/ShopifyIcon.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react'
+
+export const ShopifyIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 200 200" version="1.1">
+    <g
+      id="Page-1"
+      stroke="none"
+      strokeWidth="1"
+      fill="white"
+      fillRule="evenodd"
+    >
+      <g id="Artboard" fill="#fff" fillRule="nonzero">
+        <g
+          id="shopify_monotone_black"
+          transform="translate(30.000000, 20.000000)"
+        >
+          <path
+            d="M95.88,18.9709091 C95.88,18.9709091 94.0854545,19.4836364 91.1372727,20.3809091 C90.6245455,18.7145455 89.8554545,16.7918182 88.83,14.7409091 C85.4972727,8.33181818 80.4981818,4.87090909 74.6018182,4.87090909 C74.6018182,4.87090909 74.6018182,4.87090909 74.6018182,4.87090909 C74.2172727,4.87090909 73.8327273,4.87090909 73.32,4.99909091 C73.1918182,4.74272727 72.9354545,4.61454545 72.8072727,4.35818182 C70.2436364,1.53818182 66.9109091,0.256363636 62.9372727,0.384545455 C55.2463636,0.640909091 47.5554545,6.15272727 41.4027273,16.0227273 C37.0445455,22.9445455 33.7118182,31.6609091 32.8145455,38.4545455 C23.97,41.1463636 17.8172727,43.0690909 17.6890909,43.1972727 C13.2027273,44.6072727 13.0745455,44.7354545 12.5618182,48.9654545 C12.1772727,52.17 0.384545455,142.41 0.384545455,142.41 L97.29,159.201818 L97.29,18.8427273 C96.5209091,18.8427273 96.1363636,18.9709091 95.88,18.9709091 Z M73.4481818,25.8927273 C68.3209091,27.4309091 62.6809091,29.2254545 57.1690909,30.8918182 C58.7072727,24.8672727 61.7836364,18.8427273 65.3727273,14.8690909 C66.7827273,13.4590909 68.7054545,11.7927273 70.8845455,10.7672727 C73.0636364,15.3818182 73.5763636,21.6627273 73.4481818,25.8927273 Z M62.9372727,5.64 C64.7318182,5.64 66.27,6.02454545 67.5518182,6.79363636 C65.5009091,7.81909091 63.45,9.48545455 61.5272727,11.4081818 C56.6563636,16.6636364 52.9390909,24.8672727 51.4009091,32.6863636 C46.7863636,34.0963636 42.1718182,35.5063636 37.9418182,36.7881818 C40.7618182,24.4827273 51.1445455,5.89636364 62.9372727,5.64 Z M48.0681818,76.14 C48.5809091,84.3436364 70.2436364,86.1381818 71.5254545,105.493636 C72.4227273,120.747273 63.45,131.13 50.5036364,131.899091 C34.8654545,132.924545 26.2772727,123.695455 26.2772727,123.695455 L29.61,109.595455 C29.61,109.595455 38.1981818,116.132727 45.12,115.62 C49.6063636,115.363636 51.2727273,111.646364 51.1445455,109.082727 C50.5036364,98.3154545 32.8145455,98.9563636 31.6609091,81.2672727 C30.6354545,66.3981818 40.3772727,51.4009091 61.9118182,49.9909091 C70.2436364,49.4781818 74.4736364,51.5290909 74.4736364,51.5290909 L69.6027273,69.9872727 C69.6027273,69.9872727 64.0909091,67.4236364 57.5536364,67.9363636 C48.0681818,68.5772727 47.94,74.6018182 48.0681818,76.14 Z M78.5754545,24.3545455 C78.5754545,20.5090909 78.0627273,14.9972727 76.2681818,10.3827273 C82.1645455,11.5363636 84.9845455,18.0736364 86.2663636,22.0472727 C83.9590909,22.6881818 81.3954545,23.4572727 78.5754545,24.3545455 Z"
+            id="Shape"
+          />
+          <path
+            d="M100.238182,158.945455 L140.487273,148.947273 C140.487273,148.947273 123.182727,31.9172727 123.054545,31.1481818 C122.926364,30.3790909 122.285455,29.8663636 121.644545,29.8663636 C121.003636,29.8663636 109.723636,29.61 109.723636,29.61 C109.723636,29.61 102.801818,22.9445455 100.238182,20.3809091 L100.238182,158.945455 Z"
+            id="Path"
+          />
+        </g>
+      </g>
+    </g>
+  </svg>
+)
diff --git a/packages/sanity-plugin/src/index.ts b/packages/sanity-plugin/src/index.ts
@@ -1,4 +1,4 @@
-import { ShopifyIcon } from './ShopifyIcon'
+import { ShopifyIcon } from './icons/ShopifyIcon'
 import { ShopifyTool } from './ShopifyTool'
 export * from './sanityDocuments'
 export * from './sanityObjects'

diff --git a/packages/sanity-plugin/src/sanityDocuments/collection.tsx b/packages/sanity-plugin/src/sanityDocuments/collection.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { SanityDocumentConfig } from '../types'
+import { MissingImage } from '../icons/MissingImage'
 
 const imageStyles = {
   width: '100%',
@@ -86,16 +87,23 @@ export const createCollectionDocument = ({
         const { title, sourceData } = props
         const itemTitle = sourceData ? title || sourceData.title : title
         const alt = `Image for ${itemTitle}`
+        const src = sourceData?.image?.w100
         const media =
           sourceData && sourceData.image ? (
-            <div style={imageWrapperStyles}>
-              <img
-                // @ts-ignore
-                style={imageStyles}
-                src={sourceData.image.w100}
-                alt={alt}
-              />
-            </div>
+            <>
+              {src ? (
+                <div style={imageWrapperStyles}>
+                  <img
+                    // @ts-ignore
+                    style={imageStyles}
+                    src={sourceData.image.w100}
+                    alt={alt}
+                  />
+                </div>
+              ) : (
+                <MissingImage />
+              )}
+            </>
           ) : (
             undefined
           )

diff --git a/packages/sanity-plugin/src/sanityDocuments/product.tsx b/packages/sanity-plugin/src/sanityDocuments/product.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { unwindEdges } from '@good-idea/unwind-edges'
 import { SanityDocumentConfig } from '../types'
+import { MissingImage } from '../icons/MissingImage'
 
 export const createProductDocument = ({
   fields,
@@ -71,12 +72,16 @@ export const createProductDocument = ({
         const { shopifyItem, title, sourceData } = props
         const itemTitle = shopifyItem ? title || shopifyItem.title : title
         const [images] = unwindEdges(sourceData.images)
-        const src = images[0].w100
+        const src = images[0]?.w100
         return {
           title: itemTitle,
           media: (
             <div style={imageWrapperStyles}>
-              <img style={imageStyles} src={src} alt={`Image for ${title}`} />
+              {src ? (
+                <img style={imageStyles} src={src} alt={`Image for ${title}`} />
+              ) : (
+                <MissingImage />
+              )}
             </div>
           )
         }