jossmac · dannya · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022 · Sep 3, 2022
diff --git a/.eslintrc b/.eslintrc
@@ -22,7 +22,7 @@
         "argsIgnorePattern": "^event$",
         "ignoreRestSiblings": true,
         "vars": "all",
-        "varsIgnorePattern": "^(glam|React)$"
+        "varsIgnorePattern": "^(React)$"
       }
     ],
     "curly": [2, "multi-line"],

diff --git a/docs/App/components.js b/docs/App/components.js
@@ -1,8 +1,8 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component, type Node } from 'react'
+import { jsx } from '@emotion/react'
 import { Link, withRouter } from 'react-router-dom'
 import { colors } from '../theme'
 import { smallDevice, largeDevice } from '../utils'

diff --git a/docs/App/index.js b/docs/App/index.js
@@ -1,8 +1,8 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component } from 'react'
+import { jsx } from '@emotion/react'
 import { HashRouter, Route, Switch } from 'react-router-dom'
 import { Helmet } from 'react-helmet'
 

diff --git a/docs/ImageProvider.js b/docs/ImageProvider.js
@@ -91,7 +91,6 @@ export default function withImages(WrappedComponent: ComponentType<*>) {
       fetch(getApiUrl())
         .then(res => res.json())
         .then(data => {
-          console.log('data.results', data.results)
           const images = setData(transformImageData(data.results))
           this.setState({ images, isLoading: false })
         })

diff --git a/docs/PrettyProps.js b/docs/PrettyProps.js
@@ -1,8 +1,8 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { type Node } from 'react'
+import { jsx } from '@emotion/react'
 
 import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'
 import typescript from 'react-syntax-highlighter/languages/prism/typescript'

diff --git a/docs/pages/Accessibility.js b/docs/pages/Accessibility.js
@@ -1,7 +1,8 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component } from 'react'
+import { jsx } from '@emotion/react'
 import { Helmet } from 'react-helmet'
 
 import Carousel, { Modal, ModalGateway } from '../../src/components'

diff --git a/docs/pages/CustomComponents/AlternativeMedia/Icon.js b/docs/pages/CustomComponents/AlternativeMedia/Icon.js
@@ -1,7 +1,8 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React from 'react'
+import { jsx } from '@emotion/react'
 
 type IconProps = { size: number, type: 'play' | 'pause' }
 const Icon = ({ size = 64, type }: IconProps) => {

diff --git a/docs/pages/CustomComponents/AlternativeMedia/Poster.js b/docs/pages/CustomComponents/AlternativeMedia/Poster.js
@@ -1,7 +1,8 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React from 'react'
+import { jsx } from '@emotion/react'
 
 import Icon from './Icon'
 import type { ViewShape } from './View'

diff --git a/docs/pages/CustomComponents/AlternativeMedia/Progress.js b/docs/pages/CustomComponents/AlternativeMedia/Progress.js
@@ -1,7 +1,9 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React from 'react'
+import { jsx } from '@emotion/react'
+
 import { colors } from '../../../theme'
 
 type Props = { progress: number }

diff --git a/docs/pages/CustomComponents/AlternativeMedia/View.js b/docs/pages/CustomComponents/AlternativeMedia/View.js
@@ -1,7 +1,8 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component, type ElementRef } from 'react'
+import { jsx } from '@emotion/react'
 import rafScheduler from 'raf-schd'
 
 import Icon from './Icon'

diff --git a/docs/pages/CustomComponents/ImageViewer/components.js b/docs/pages/CustomComponents/ImageViewer/components.js
@@ -1,8 +1,9 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React from 'react'
+import { jsx } from '@emotion/react'
+
 import { colors } from '../../../theme'
 import { smallDevice, largeDevice } from '../../../utils'
 

diff --git a/docs/pages/CustomComponents/ImageViewer/index.js b/docs/pages/CustomComponents/ImageViewer/index.js
@@ -1,10 +1,10 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component } from 'react'
-import Carousel, { Modal, ModalGateway } from '../../../../src/components'
+import { jsx } from '@emotion/react'
 
+import Carousel, { Modal, ModalGateway } from '../../../../src/components'
 import { Heading } from '../../components'
 import { colors } from '../../../theme'
 import { largeDevice } from '../../../utils'

diff --git a/docs/pages/CustomStyles/CarouselExample.js b/docs/pages/CustomStyles/CarouselExample.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 
 import Carousel from '../../../src/components'

diff --git a/docs/pages/CustomStyles/ModalExample.js b/docs/pages/CustomStyles/ModalExample.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 
 import Carousel, { Modal, ModalGateway } from '../../../src/components'

diff --git a/docs/pages/CustomStyles/index.js b/docs/pages/CustomStyles/index.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 import { Helmet } from 'react-helmet'
 
@@ -50,8 +48,8 @@ export default class CustomStyles extends Component<Props> {
         <Title>Styles</Title>
         <p>
           React-Images offers a flexible, light-weight styling framework which is a thin abstraction over simple javascript objects using{' '}
-          <a href="https://github.com/threepointone/glam" target="_blank">
-            glam
+          <a href="https://emotion.sh/" target="_blank">
+            Emotion
           </a>
           .
         </p>

diff --git a/docs/pages/Home/GalleryExample.js b/docs/pages/Home/GalleryExample.js
@@ -1,7 +1,8 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { Component, Fragment } from 'react'
+import { jsx } from '@emotion/react'
 
 import { type ProviderProps } from '../../ImageProvider'
 import Carousel, { Modal, ModalGateway } from '../../../src/components'

diff --git a/docs/pages/Home/index.js b/docs/pages/Home/index.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 
 import { type ProviderProps } from '../../ImageProvider'

diff --git a/docs/pages/Patterns/RouterGallery.js b/docs/pages/Patterns/RouterGallery.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 
 import Carousel from '../../../src/components'

diff --git a/docs/pages/Patterns/index.js b/docs/pages/Patterns/index.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 import { Helmet } from 'react-helmet'
 

diff --git a/docs/pages/Thanks/index.js b/docs/pages/Thanks/index.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React, { Component } from 'react'
 
 import { Title } from '../components'

diff --git a/docs/pages/components.js b/docs/pages/components.js
@@ -1,17 +1,16 @@
 // @flow
-// @jsx glam
-
-import glam from 'glam'
+/** @jsxRuntime classic */
+/** @jsx jsx */
 import React, { type Node } from 'react'
-
+import { jsx } from '@emotion/react'
 import SyntaxHighlighter, { registerLanguage } from 'react-syntax-highlighter/prism-light'
-import jsx from 'react-syntax-highlighter/languages/prism/jsx'
+import { jsx as highlighterJsx } from 'react-syntax-highlighter/languages/prism'
 import { tomorrow } from 'react-syntax-highlighter/styles/prism'
 
 import { colors } from '../theme'
 import { smallDevice } from '../utils'
 
-registerLanguage('jsx', jsx)
+registerLanguage('jsx', highlighterJsx)
 
 // ==============================
 // Title
@@ -53,7 +52,6 @@ export const Heading = ({ source, ...props }: { source: string }) => (
         href={headingLink(source)}
         target="_blank"
         css={{
-          color: colors.primary,
           borderBottom: '1px solid rgba(0, 215, 255, 0.25)',
           color: '#00d7ff',
           textDecoration: 'none',

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-images",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0",
   "description": "A mobile-friendly, highly customizable, carousel component for displaying media in ReactJS",
   "main": "lib/index.js",
   "jsnext:main": "dist/react-images.es.js",
@@ -35,6 +35,7 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-react": "^6.24.1",
     "copy-webpack-plugin": "^5.1.2",
+    "cross-env": "^7.0.3",
     "css-loader": "^3.6.0",
     "dotenv": "^8.2.0",
     "eslint": "^7.19.0",
@@ -66,9 +67,8 @@
     "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
+    "@emotion/react": "^11.10.4",
     "a11y-focus-store": "^1.0.0",
-    "cross-env": "^7.0.3",
-    "glam": "^5.0.1",
     "html-react-parser": "^1.2.4",
     "raf-schd": "^4.0.2",
     "react-focus-on": "^3.5.1",

diff --git a/rollup.config.js b/rollup.config.js
@@ -2,6 +2,7 @@
 
 import babel from 'rollup-plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
+import commonjs from 'rollup-plugin-commonjs'
 import { uglify } from 'rollup-plugin-uglify'
 import replace from 'rollup-plugin-replace'
 import { minify } from 'uglify-es'
@@ -10,7 +11,6 @@ const name = 'Images'
 const path = 'dist/react-images'
 const globals = {
   classnames: 'classNames',
-  glam: 'glam',
   'prop-types': 'PropTypes',
   'react-dom': 'ReactDOM',
   'react-input-autosize': 'AutosizeInput',
@@ -63,7 +63,12 @@ export default [
       globals: globals,
     },
     external: external,
-    plugins: [babel(babelOptions(false)), injectSecret(), resolve()],
+    plugins: [
+      babel(babelOptions(false)),
+      injectSecret(),
+      resolve(),
+      commonjs({ include: /node_modules\/hoist-non-react-statics/ })
+    ],
   },
   {
     input: 'src/index.umd.js',
@@ -74,6 +79,12 @@ export default [
       globals: globals,
     },
     external: external,
-    plugins: [babel(babelOptions(true)), injectSecret(), resolve(), uglify({}, minify)],
+    plugins: [
+      babel(babelOptions(true)),
+      injectSecret(),
+      resolve(),
+      commonjs({ include: /node_modules\/hoist-non-react-statics/ }),
+      uglify({}, minify)
+    ],
   },
 ]
diff --git a/src/components/Carousel.js b/src/components/Carousel.js
@@ -1,8 +1,6 @@
 // @flow
-// @jsx glam
 import React, { Component, type ElementRef } from 'react'
 import { findDOMNode } from 'react-dom'
-import glam from 'glam'
 import rafScheduler from 'raf-schd'
 import { ViewPager, Frame, Track, View as PageView } from 'react-view-pager'
 

diff --git a/src/components/Container.js b/src/components/Container.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 import React, { type ElementRef, type Node } from 'react'
-import glam from 'glam'
 import { Div } from '../primitives'
 import { type PropsWithStyles } from '../types'
 import { className } from '../utils'

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,6 +1,4 @@
 // @flow
-// @jsx glam
-import glam from 'glam'
 import React from 'react'
 
 import { smallDevice } from './css-helpers'
@@ -36,6 +34,7 @@ export const footerCSS = ({ isModal, interactionIsIdle }: State) => ({
   padding: isModal ? '30px 20px 20px' : '10px 0',
   position: isModal ? 'absolute' : null,
   right: isModal ? 0 : null,
+  background: isModal ? 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))' : null,
   transform: isModal ? `translateY(${interactionIsIdle ? 10 : 0}px)` : null,
   transition: 'opacity 300ms, transform 300ms',
   zIndex: isModal ? 1 : null,
@@ -54,8 +53,6 @@ const footerBaseClassName = componentBaseClassNames.Footer
 const Footer = (props: Props) => {
   const { components, getStyles, innerProps, isFullscreen, isModal } = props
 
-  const style = isModal ? { background: 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.33))' } : null
-
   const state = { isFullscreen, isModal }
   const cn = {
     container: className(footerBaseClassName, state),
@@ -73,9 +70,6 @@ const Footer = (props: Props) => {
     <Div
       css={css.container}
       className={cn.container}
-      // TODO glam prefixer fails on gradients
-      // https://github.com/threepointone/glam/issues/35
-      style={style}
       {...innerProps}
     >
       <Caption {...props} />

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 import React, { type Node } from 'react'
-import glam from 'glam'
 
 import { Button, Div } from '../primitives'
 import { className } from '../utils'
@@ -29,6 +27,7 @@ export const headerCSS = ({ interactionIsIdle }: State) => ({
   padding: 10,
   paddingBottom: 20,
   position: 'absolute',
+  background: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))',
   transform: `translateY(${interactionIsIdle ? -10 : 0}px)`,
   transition: 'opacity 300ms, transform 300ms',
   top: 0,
@@ -56,11 +55,6 @@ const Header = (props: Props) => {
     <Div
       css={getStyles(headerBaseClassName, props)}
       className={className(headerBaseClassName, state)}
-      // TODO glam prefixer fails on gradients
-      // https://github.com/threepointone/glam/issues/35
-      style={{
-        background: 'linear-gradient(rgba(0,0,0,0.33), rgba(0,0,0,0))',
-      }}
       {...innerProps}
     >
       <span />

diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
@@ -1,7 +1,5 @@
 // @flow
-// @jsx glam
 import React, { cloneElement, Component } from 'react'
-import glam from 'glam'
 import { FullScreen } from 'react-full-screen'
 import focusStore from 'a11y-focus-store'
 import { defaultModalComponents, type ModalComponents } from '../defaultComponents'