Merge pull request #50 from bensmithett/images

Responsive images

package.json

@@ -22,6 +22,7 @@
     "tropical-islands": "^2.0.0",
     "tropical-scaffold": "^2.0.0",
     "vite": "^3.0.4",
+    "vite-plugin-image-presets": "^0.3.2",
     "yarpm": "^1.1.1"
   },
   "engines": {

src/components/tropical/CodeBlock/CodeBlock.stories.jsx

@@ -1,6 +1,6 @@
 import { CodeBlock } from './CodeBlock'
 
-export default { title: 'CodeBlock' }
+export default { title: 'tropical/CodeBlock' }
 
 export const JS = () => (
   <CodeBlock language='javascript'>{`function relax() {

src/components/tropical/Image/Image.jsx

@@ -0,0 +1,6 @@
+export function Image({ src: importedImage, ...imgProps }) {
+  if (typeof importedImage === 'string') return <img src={importedImage} {...imgProps} />
+
+  const { srcset, ...imgPropsFromImport } = importedImage[importedImage.length - 1]
+  return <img srcSet={srcset} {...imgPropsFromImport} {...imgProps} />
+}

src/components/tropical/Image/Image.stories.jsx

@@ -0,0 +1,28 @@
+import { Image } from './Image'
+import { useFela } from 'react-fela'
+import singleFormat from '../gunayala.jpg?preset=singleFormatExample'
+import singleFormatSrc from '../gunayala.jpg?preset=singleFormatExample&src'
+import singleFormatSrcset from '../gunayala.jpg?preset=singleFormatExample&srcset'
+import multiFormat from '../gunayala.jpg?preset=multiFormatExample'
+
+export default { title: 'tropical/Image' }
+
+export const Unstyled = () => <Image src={singleFormat} width='500' />
+
+export const Styled = () => {
+  const { css } = useFela()
+  return (
+    <Image
+      src={singleFormat}
+      className={css({ width: '100%', border: '2px dashed rebeccapurple' })}
+      alt='Guna Yala'
+      width='500'
+    />
+  )
+}
+
+export const ManualSrcAndSrcset = () => (
+  <Image src={singleFormatSrc} srcSet={singleFormatSrcset} width='500' />
+)
+
+export const IgnoresRedundantSources = () => <Image src={multiFormat} width='500' />

src/components/tropical/Image/index.js

@@ -0,0 +1 @@
+export * from './Image'

src/components/tropical/Picture/Picture.jsx

@@ -0,0 +1,22 @@
+export function Picture({
+  src: importedImage,
+  children = (imgProps) => <img {...imgProps} />,
+  ...pictureProps
+}) {
+  if (typeof importedImage === 'string')
+    throw new Error(
+      `A string 'src' was passed to <Picture>. If you don't need multiple <source>'s, use <Image> instead.`
+    )
+
+  return (
+    <picture {...pictureProps}>
+      {importedImage.map(({ srcset, ...sourceOrImgProps }, i) =>
+        i < importedImage.length - 1 ? (
+          <source srcSet={srcset} {...sourceOrImgProps} key={i} />
+        ) : (
+          children({ srcSet: srcset, ...sourceOrImgProps, key: i })
+        )
+      )}
+    </picture>
+  )
+}

src/components/tropical/Picture/Picture.stories.jsx

@@ -0,0 +1,48 @@
+import { Picture } from './Picture'
+import { useFela } from 'react-fela'
+import multiFormat from '../gunayala.jpg?preset=multiFormatExample'
+import multiFormatSrc from '../gunayala.jpg?preset=multiFormatExample&src'
+import multiFormatSrcset from '../gunayala.jpg?preset=multiFormatExample&srcset'
+
+export default { title: 'tropical/Picture' }
+
+export const DefaultImg = () => <Picture src={multiFormat} />
+
+export const StyledImg = () => {
+  const { css } = useFela()
+  return (
+    <Picture src={multiFormat}>
+      {(imgProps) => (
+        <img
+          {...imgProps}
+          className={css({
+            maxWidth: '100%',
+            border: '2px dashed rebeccapurple'
+          })}
+          width='500'
+        />
+      )}
+    </Picture>
+  )
+}
+
+export const StyledPictureAndImg = () => {
+  const { css } = useFela()
+  return (
+    <Picture
+      src={multiFormat}
+      className={css({ display: 'block', border: '5px dashed chartreuse' })}
+    >
+      {(imgProps) => (
+        <img
+          {...imgProps}
+          className={css({
+            maxWidth: '100%',
+            border: '2px dashed rebeccapurple'
+          })}
+          width='500'
+        />
+      )}
+    </Picture>
+  )
+}

src/components/tropical/Picture/index.js

@@ -0,0 +1 @@
+export * from './Picture'

src/imagePresets.js

@@ -0,0 +1,22 @@
+import { widthPreset } from 'vite-plugin-image-presets'
+
+// Presets for https://github.com/ElMassimo/vite-plugin-image-presets
+// See https://tropical.js.org/docs/images
+// and stories for tropical/Image & tropical/Picture for usage examples.
+
+export default {
+  multiFormatExample: widthPreset({
+    widths: [200, 500],
+    formats: {
+      webp: { quality: 50 },
+      jpg: { quality: 70 }
+    }
+  }),
+
+  singleFormatExample: widthPreset({
+    widths: [200, 500],
+    formats: {
+      original: { quality: 80 }
+    }
+  })
+}

vite.config.js

@@ -2,10 +2,13 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import mdx from '@mdx-js/rollup'
 import rehypeSlug from 'rehype-slug'
+import imagePresetsPlugin from 'vite-plugin-image-presets'
+import imagePresetsConfig from './src/imagePresets'
 
 export const plugins = [
   react(),
-  mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' })
+  mdx({ rehypePlugins: [rehypeSlug], providerImportSource: '@mdx-js/react' }),
+  imagePresetsPlugin(imagePresetsConfig)
 ]
 
 export const build = {