chore: upgrade to latest substyle (#52)

* chore: upgrade to latest substyle

BREAKING CHANGE: requires upgrade to latest versions of substyle-jss/substyle-glamor if these are used

* upgrade to latest substyle

* fix width handling

* chore: upgrade to latest substyle version

* chore: clear out unused recompose dep

* chore: fix test to enforce line break

closes #62

* chore: get rid of lodash dep

* chore: fix flow typings

* some smaller changes

Co-authored-by: Philipp Giese <[email protected]>

Author: jfschwarz

babel.config.js

@@ -17,7 +17,5 @@ module.exports = {
   plugins: [
     '@babel/transform-runtime',
     '@babel/plugin-proposal-object-rest-spread',
-
-    'lodash',
   ],
 }

demo/src/PositionAlignOverview.js

@@ -1,12 +1,11 @@
-import { compact } from 'lodash'
 import React, { useCallback, useRef, useState } from 'react'
 
 import Stick from '../../es'
 import { useWatcher } from './hooks'
 
 const formPairs = (listA: Array<string>, listB: Array<string>) =>
-  compact(
-    listA.map((a: string) =>
+  listA
+    .map((a: string) =>
       listB.map((b: string) => {
         if (a === b) {
           return null
@@ -15,7 +14,7 @@ const formPairs = (listA: Array<string>, listB: Array<string>) =>
         return `${a} ${b}`
       })
     )
-  )
+    .filter((pair) => pair !== null)
 
 const verticals = ['top', 'middle', 'bottom']
 const horizontals = ['left', 'center', 'right']

demo/src/regressions/FitOnPage.js

@@ -1,4 +1,3 @@
-import { times } from 'lodash'
 import React from 'react'
 
 import Stick from '../../../es'
@@ -25,7 +24,7 @@ const node = (
       minHeight: 18,
     }}
   >
-    {times(1, () => 'Lorem ipsum dolor sit amet.').join(' ')}
+    {Array(10).fill('Lorem ipsum dolor sit amet.').join(' ')}
   </div>
 )
 

demo/src/regressions/StickNodeWidth.js

@@ -56,7 +56,9 @@ const Examples = ({ inline }) => (
         position="middle right"
         node={
           <Node>
-            This text must line-break as it would reach off-screen otherwise
+            This text must line-break as it would reach off-screen otherwise.
+            After we've increased page width, this text needed to be extended a
+            bit.
           </Node>
         }
       >

demo/src/regressions/StickOnHover.js

@@ -1,4 +1,3 @@
-import { range } from 'lodash'
 import React, { useState } from 'react'
 
 import Stick from '../../../es'
@@ -14,11 +13,13 @@ function StickOnHover() {
       description="Move your mouse over the squares. When you're hovering one another node should be shown. However, there should always only be one node at the same time."
     >
       <div style={{ display: 'flex', flexWrap: 'wrap' }}>
-        {range(100).map(i => (
-          <div key={i} style={{ marginLeft: 20, marginBottom: 20 }}>
-            <Popover />
-          </div>
-        ))}
+        {Array(100)
+          .fill(null)
+          .map((_, i) => (
+            <div key={i} style={{ marginLeft: 20, marginBottom: 20 }}>
+              <Popover />
+            </div>
+          ))}
       </div>
     </Regression>
   )
@@ -44,7 +45,7 @@ const Anchor = () => (
     style={{
       height: 30,
       width: 30,
-      backgroundColor: 'rgb(24, 170, 177)'
+      backgroundColor: 'rgb(24, 170, 177)',
     }}
   />
 )
@@ -54,7 +55,7 @@ const Node = ({ children }) => (
     style={{
       backgroundColor: '#ae0d5c',
       width: 10,
-      height: 10
+      height: 10,
     }}
   >
     {children}

nwb.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   type: 'react-component',
   babel: {
-    cherryPick: 'lodash',
     env: {
       targets: {
         browsers: ['chrome >= 50', 'firefox >= 52', 'safari >= 10', 'ie >= 11'],

package.json

@@ -27,10 +27,8 @@
   },
   "dependencies": {
     "invariant": "^2.2.4",
-    "lodash": "^4.17.4",
-    "recompose": "0.30.0",
     "requestidlecallback": "^0.3.0",
-    "substyle": "^7.1.3"
+    "substyle": "^9.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.9.6",
@@ -63,7 +61,7 @@
     "react-dom": "16.13.1",
     "regenerator-runtime": "0.13.5",
     "semantic-release": "17.0.7",
-    "substyle-glamor": "4.0.0",
+    "substyle-glamor": "4.0.1",
     "webpack": "4.43.0",
     "webpack-cli": "3.3.11",
     "webpack-dev-server": "3.10.3"

src/Stick.js

@@ -2,36 +2,35 @@
 import 'requestidlecallback'
 
 import invariant from 'invariant'
-import { some } from 'lodash'
 import React, {
   useCallback,
   useContext,
   useEffect,
   useRef,
   useState,
 } from 'react'
-import { type HOC } from 'recompose'
-import { type Substyle, defaultStyle } from 'substyle'
+import useStyles from 'substyle'
 
 import { StickContext } from './StickContext'
 import StickInline from './StickInline'
 import StickNode from './StickNode'
 import StickPortal from './StickPortal'
 import DEFAULT_POSITION from './defaultPosition'
-import { type AlignT, type ApiPropsT, type PositionT } from './flowTypes'
+import { type AlignT, type PositionT, type StickPropsT } from './flowTypes'
 import { useAutoFlip, useWatcher } from './hooks'
 import { getDefaultAlign, getModifiers, scrollX, uniqueId } from './utils'
 
-type PropsT = {|
-  ...ApiPropsT,
-
-  style: Substyle,
-|}
+const defaultStyles = {
+  node: {
+    position: 'absolute',
+    zIndex: 99,
+    textAlign: 'left',
+  },
+}
 
 function Stick({
   inline,
   node,
-  style,
   sameWidth,
   children,
   updateOnAnimationFrame,
@@ -42,8 +41,11 @@ function Stick({
   autoFlipHorizontally,
   autoFlipVertically,
   onClickOutside,
+  style,
+  className,
+  classNames,
   ...rest
-}: PropsT) {
+}: StickPropsT) {
   const [width, setWidth] = useState(0)
   const [containerNestingKeyExtension] = useState(() => uniqueId())
   const nestingKey = [useContext(StickContext), containerNestingKeyExtension]
@@ -61,6 +63,16 @@ function Stick({
     align || getDefaultAlign(position || DEFAULT_POSITION)
   )
 
+  const styles = useStyles(
+    defaultStyles,
+    { style, className, classNames },
+    getModifiers({
+      position: resolvedPosition,
+      align: resolvedAlign,
+      sameWidth,
+    })
+  )
+
   useEffect(() => {
     const handleScroll = () => {
       if (!nodeRef.current || !anchorRef.current) {
@@ -122,10 +134,6 @@ function Stick({
 
   useWatcher(measure, { updateOnAnimationFrame: !!updateOnAnimationFrame })
 
-  const resolvedStyle = style(
-    getModifiers({ position: resolvedPosition, align: resolvedAlign })
-  )
-
   const handleReposition = useCallback(() => {
     if (nodeRef.current && anchorRef.current) {
       checkAlignment(nodeRef.current, anchorRef.current)
@@ -139,7 +147,7 @@ function Stick({
           {...rest}
           position={resolvedPosition}
           align={resolvedAlign}
-          style={resolvedStyle}
+          style={styles}
           node={
             node && (
               <StickNode
@@ -195,7 +203,7 @@ function Stick({
             </StickNode>
           )
         }
-        style={resolvedStyle}
+        style={styles}
         nestingKey={nestingKey}
         containerRef={containerRef}
         onReposition={handleReposition}
@@ -221,7 +229,13 @@ function isOutside(anchorRef, containerRef, target: HTMLElement) {
     const nestedStickNodes = document.querySelectorAll(
       `[data-stickNestingKey^='${nestingKey}']`
     )
-    return !some(nestedStickNodes, (stickNode) => stickNode.contains(target))
+
+    return (
+      !nestedStickNodes ||
+      !Array.from(nestedStickNodes).some((stickNode) =>
+        stickNode.contains(target)
+      )
+    )
   }
 
   return true
@@ -273,15 +287,4 @@ function calculateWidth(
   return 0
 }
 
-const styled: HOC<*, ApiPropsT> = defaultStyle(
-  {
-    node: {
-      position: 'absolute',
-      zIndex: 99,
-      textAlign: 'left',
-    },
-  },
-  getModifiers
-)
-
-export default styled(Stick)
+export default Stick

src/StickInline.js

@@ -1,79 +1,80 @@
 // @flow
 import React from 'react'
-import { type HOC } from 'recompose'
-import { defaultStyle } from 'substyle'
+import useStyles from 'substyle'
 
 import { type StickInlinePropsT } from './flowTypes'
 import { getModifiers } from './utils'
 
 function StickInline({
   node,
   children,
-  style,
   component,
   containerRef,
   nestingKey,
   align,
   position,
+  style,
   ...rest
 }: StickInlinePropsT) {
+  const styles = useStyles(
+    defaultStyle,
+    { style },
+    getModifiers({ align, position })
+  )
   const Component = component || 'div'
   return (
     <Component
-      {...style}
       {...rest}
+      {...styles}
       ref={containerRef}
       data-sticknestingkey={nestingKey}
     >
       {children}
-      {node && <div {...style('node')}>{node}</div>}
+      {node && <div {...styles('node')}>{node}</div>}
     </Component>
   )
 }
 
-const styled: HOC<*, StickInlinePropsT> = defaultStyle(
-  {
-    position: 'relative',
+const defaultStyle = {
+  position: 'relative',
 
-    node: {
-      position: 'absolute',
-      zIndex: 99,
-      textAlign: 'left',
-    },
+  node: {
+    position: 'absolute',
+    zIndex: 99,
+    textAlign: 'left',
+  },
 
-    '&position-top': {
-      node: {
-        top: 0,
-      },
+  '&position-top': {
+    node: {
+      top: 0,
     },
-    '&position-middle': {
-      node: {
-        top: '50%',
-      },
+  },
+  '&position-middle': {
+    node: {
+      top: '50%',
     },
-    '&position-bottom': {
-      node: {
-        top: '100%',
-      },
+  },
+  '&position-bottom': {
+    node: {
+      top: '100%',
     },
+  },
 
-    '&position-left': {
-      node: {
-        left: 0,
-      },
+  '&position-left': {
+    node: {
+      left: 0,
     },
-    '&position-center': {
-      node: {
-        left: '50%',
-      },
+  },
+  '&position-center': {
+    node: {
+      left: '50%',
     },
-    '&position-right': {
-      node: {
-        left: '100%',
-      },
+  },
+  '&position-right': {
+    node: {
+      left: '100%',
     },
   },
-  getModifiers
-)
+}
 
-export default styled(StickInline)
+export default StickInline