latest state

Author: drcmda

stories/examples/spring.js renamed to _stories/examples/spring.js

@@ -11,59 +11,59 @@ const data = [
     name: 'Rare Wind',
     description: '#a8edea → #fed6e3',
     css: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
-    height: 150
+    height: 150,
   },
   {
     name: 'Saint Petersburg',
     description: '#f5f7fa → #c3cfe2',
     css: 'linear-gradient(135deg, #c3cfe2 0%, #c3cfe2 100%)',
-    height: 300
+    height: 300,
   },
   {
     name: 'Deep Blue',
     description: '#e0c3fc → #8ec5fc',
     css: 'linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%)',
-    height: 200
+    height: 200,
   },
   {
     name: 'Ripe Malinka',
     description: '#f093fb → #f5576c',
     css: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
-    height: 200
+    height: 200,
   },
   {
     name: 'Near Moon',
     description: '#5ee7df → #b490ca',
     css: 'linear-gradient(135deg, #5ee7df 0%, #b490ca 100%)',
-    height: 300
+    height: 300,
   },
   {
     name: 'Wild Apple',
     description: '#d299c2 → #fef9d7',
     css: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
-    height: 150
+    height: 150,
   },
   {
     name: 'Ladoga Bottom',
     description: '#ebc0fd → #d9ded8',
     css: 'linear-gradient(135deg, #ebc0fd 0%, #d9ded8 100%)',
-    height: 200
+    height: 200,
   },
   {
     name: 'Sunny Morning',
     description: '#f6d365 → #fda085',
     css: 'linear-gradient(120deg, #f6d365 0%, #fda085 100%)',
-    height: 200
+    height: 200,
   },
   {
     name: 'Lemon Gate',
     description: '#96fbc4 → #f9f586',
     css: 'linear-gradient(to top, #96fbc4 0%, #f9f586 100%)',
-    height: 400
-  }
+    height: 400,
+  },
 ]
 
-export function List ({ children, config, items, keys, heights, ...rest }) {
+export function List({ children, config, items, keys, heights, ...rest }) {
   let totalHeight = 0
   let displayData = React.useMemo(
     () =>
@@ -88,16 +88,15 @@ export function List ({ children, config, items, keys, heights, ...rest }) {
       return { y, height }
     },
     config,
-    trail: 100
+    trail: 100,
   })
 
   // // something in useTransition causes an infinite loop
 
   return (
     <div
       style={{ position: 'relative', width: '100%', height: totalHeight }}
-      {...rest}
-    >
+      {...rest}>
       {transitions.map(({ item, props, key }, index) => (
         <animated.div
           key={key}
@@ -108,7 +107,7 @@ export function List ({ children, config, items, keys, heights, ...rest }) {
             opacity: props.opacity,
             height: props.height,
             zIndex: displayData.length - index,
-            transform: props.y.interpolate(y => `translate3d(0,${y}px,0)`)
+            transform: props.y.interpolate(y => `translate3d(0,${y}px,0)`),
           }}
           children={children(item.child)}
         />
@@ -120,22 +119,21 @@ export function List ({ children, config, items, keys, heights, ...rest }) {
 export class App extends Component {
   state = { data }
   shuffle = () => this.setState(state => ({ data: shuffle(state.data) }))
-  componentDidMount () {
+  componentDidMount() {
     setInterval(this.shuffle, 2500)
   }
-  render () {
+  render() {
     return (
-      <div id='complex'>
+      <div id="complex">
         <List
-          className='main-list'
+          className="main-list"
           items={this.state.data}
           keys={d => d.name}
           heights={d => d.height}
-          config={{ mass: 3, tension: 100, friction: 40 }}
-        >
+          config={{ mass: 3, tension: 100, friction: 40 }}>
           {item => (
-            <div className='cell'>
-              <div className='details' style={{ backgroundImage: item.css }}>
+            <div className="cell">
+              <div className="details" style={{ backgroundImage: item.css }}>
                 <h1>{item.name}</h1>
                 <p>{item.description}</p>
               </div>

stories/index.css renamed to _stories/index.css

@@ -5,7 +5,7 @@ import { X } from 'react-feather'
 import {
   animated,
   useTransition,
-  config as defaultConfig
+  config as defaultConfig,
 } from '../../src/targets/web/hooks'
 import { testStories } from '../index'
 
@@ -99,9 +99,9 @@ export const Life = styled(animated.div)`
 
 let id = 0
 
-function MessageHub ({
+function MessageHub({
   config = { tension: 125, friction: 20, precision: 0.1 },
-  timeout = 100000
+  timeout = 100000,
 }) {
   const [cancelMap] = useState(() => new WeakMap())
   const [refMap] = useState(() => new WeakMap())
@@ -133,7 +133,7 @@ function MessageHub ({
     // functional array configs don't seem to work, the code below would normally
     // define configs for the functional leave state above (3 calls, first uses duration)
     config: (item, state) =>
-      state === 'leave' ? [{ duration: timeout }, config, config] : config
+      state === 'leave' ? [{ duration: timeout }, config, config] : config,
   })
 
   useEffect(
@@ -153,8 +153,7 @@ function MessageHub ({
             <Life style={{ right: life }} />
             <p>{item.msg}</p>
             <Button
-              onClick={() => cancelMap.has(item) && cancelMap.get(item)()}
-            >
+              onClick={() => cancelMap.has(item) && cancelMap.get(item)()}>
               <X size={18} />
             </Button>
           </Content>

stories/index.js renamed to _stories/index.js

@@ -3,12 +3,12 @@ import {
   useSpring,
   animated,
   config,
-  useKeyframes
+  useKeyframes,
 } from '../../src/targets/web/hooks'
 import { testStories } from '../index'
 import './styles.css'
 
-function TestSpring () {
+function TestSpring() {
   const ref = useRef(null)
   const [length, set] = useState(0)
   const props = useSpring({ dash: length, config: config.molasses })
@@ -17,16 +17,15 @@ function TestSpring () {
 
   return (
     <svg
-      width='180'
-      viewBox='0 0 23 23'
-      display={ref.current ? 'display' : 'none'}
-    >
-      <g fill='transparent' stroke='hotpink' strokeWidth='0.5'>
+      width="180"
+      viewBox="0 0 23 23"
+      display={ref.current ? 'display' : 'none'}>
+      <g fill="transparent" stroke="hotpink" strokeWidth="0.5">
         <animated.path
           ref={ref}
           strokeDasharray={length}
           strokeDashoffset={props.dash.interpolate(d => length - d)}
-          d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'
+          d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
         />
       </g>
     </svg>
@@ -58,7 +57,7 @@ const useScripting = useKeyframes.spring(async next => {
   await next({
     from: { left: '0%', top: '0%', width: '0%', height: '0%' },
     width: '100%',
-    height: '100%'
+    height: '100%',
   })
   while (true) {
     await next({ height: '50%' })
@@ -72,12 +71,12 @@ const useScripting = useKeyframes.spring(async next => {
   }
 })
 
-function TestSpringKeyframe () {
+function TestSpringKeyframe() {
   const props = useScripting()
 
   return (
     <div className="springRoot">
-      <animated.div className='box2' style={props} />
+      <animated.div className="box2" style={props} />
     </div>
   )
 }