@startlibs/utils 1.0.3 → 1.1.0

package/src/lodashUtils.jsx

@@ -0,0 +1,110 @@
+import _ from 'lodash/fp'
+import {callIfFunction} from './utils'
+
+const moveElement = _.curry((from, to, list) => {
+  const el = list[from]
+  const without = _.pullAt(from, list)
+  without.splice(to, 0, el)
+  return without
+})
+
+const unsetOrRemoveAt = _.curry((path, value) => {
+  const pathArr = toPath(path)
+  const [lastKey] = pathArr.slice(-1)
+  return update(pathArr.slice(0, -1), (v) => Array.isArray(v) ? removeAt(lastKey, v) : unset(lastKey, v), value)
+})
+
+const pathToString = (path) => toPath(path).join(".")
+
+const sanitizePath = (path) =>
+  Array.isArray(path)
+  ? path.map(sanitizePath)
+  : typeof path === 'number'
+    ? path.toString()
+    : path === undefined
+      ? []
+      : path
+
+const toPath = (path) => _.toPath(sanitizePath(path))
+
+const isEmptyPath = (path) => (path && !path.length)
+
+const update = _.curry((path, updater, state) => {
+  const sanitizedPath = sanitizePath(path)
+  if (isEmptyPath(sanitizedPath)) {
+    return updater(state)
+  } else {
+    return _.update(sanitizedPath, updater, state)
+  }
+})
+
+const get = _.curry((path, state) => {
+  const sanitizedPath = sanitizePath(path)
+  if (isEmptyPath(sanitizedPath)) {
+    return state
+  } else {
+    return _.get(sanitizedPath, state)
+  }
+})
+
+const set = _.curry((path, value, state) => {
+  const sanitizedPath = sanitizePath(path)
+  if (isEmptyPath(sanitizedPath)) {
+    return value
+  } else {
+    return _.set(sanitizedPath, value, state)
+  }
+})
+const unset = _.curry((path, state) => {
+  const sanitizedPath = sanitizePath(path)
+  if (isEmptyPath(sanitizedPath)) {
+    return undefined
+  } else {
+    return _.unset(sanitizedPath, state)
+  }
+})
+
+const removeNAt = _.curry((pos, n, value) => [...value.slice(0, Number(pos)), ...value.slice(Number(pos)+n)])
+const removeAt = removeNAt(_.__,1)
+
+const when = _.curry((cond,fn,value) => callIfFunction(cond,value) ? fn(value) : value)
+const assign = _.curry((a,b) => _.assign(b,a))
+const concat = _.curry((a,b) => _.concat(b,a))
+
+const each = _.each.convert({cap:false})
+const find = _.find.convert({cap:false})
+const filter = _.filter.convert({cap:false})
+const map = _.map.convert({cap:false})
+const mapValues = _.mapValues.convert({cap:false})
+const flatMap = _.flatMap.convert({cap:false})
+
+const insertAt = _.curry((pos, newElements, value) => [...value.slice(0, pos).concat(newElements), ...value.slice(pos)])
+
+const select = _.curry((selector,value) => (_.isFunction(selector) ? selector : (selector ? _.get(selector) : _.identity))(value))
+const itemToggle = _.curry((item,list ) => (list||[]).indexOf(item)>=0 ? _.without([item],list) : [...(list||[]),item])
+
+export const _s = {
+  moveElement,
+  unsetOrRemoveAt,
+  pathToString,
+  toPath,
+  update,
+  get,
+  set,
+  select,
+  unset,
+  removeNAt,
+  removeAt,
+  itemToggle,
+  when,
+  assign,
+  concat,
+  each,
+  find,
+  filter,
+  map,
+  flatMap,
+  mapValues,
+  insertAt,
+  flowEach: (...args) => _.flow(...args.filter(Boolean))
+}

package/src/promiseUtils.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import _ from "lodash/fp";
+
+export const createPromiseResolverPair = () => {
+  let res, rej;
+  const promise = new Promise((res2,rej2) => {
+    res = res2;
+    rej = rej2;
+  })
+  return [promise,[res,rej]]
+}
+
+
+export const createSimplePromiseLock = () => {
+  let promiseQueue = Promise.resolve()
+  return () => {
+    let resolve = _.identity
+    const nextPromise = new Promise(res => {
+      resolve = res
+    })
+    const prevPromise = promiseQueue
+    promiseQueue = nextPromise
+    return prevPromise.then(() => resolve)
+  }
+}
+async function* createSinglePromiseQueue() {
+  let lastPromise = Promise.resolve()
+  /* eslint-disable no-await-in-loop */
+  while (true) {
+    await lastPromise
+    let resolve = _.identity
+    lastPromise = new Promise(res => {
+      resolve = res
+    })
+    yield resolve
+  }
+}
+
+
+export async function* createPromiseQueue(parallel = 1) {
+  const queues = _.times(createSinglePromiseQueue, parallel)
+  const promises = queues.map(q => q.next())
+  const locks = await Promise.all(promises)
+
+  const getNextAvailableLock = async () => {
+    const index = locks.findIndex(Boolean)
+    if (index >= 0) {
+      const lock = locks[index]
+      locks[index] = null
+      promises[index] = queues[index].next().then(result => {
+        locks[index] = result
+      })
+      return [lock.value, locks.filter(Boolean).length]
+    }
+    await Promise.race(promises)
+    return getNextAvailableLock()
+  }
+  while (true) {
+    const lock = await getNextAvailableLock()
+    yield lock
+  }
+}
+
+export const promiseMapReduce = (arr, callback) =>
+  arr.reduce((acc, item) => acc.then(seq => callback(item).then(res => [...seq, res])), Promise.resolve([]))
+
+export const asyncDebounce = (fn, delay = 200) => {
+  let timeout
+  return (...args) => {
+    clearTimeout(timeout)
+    return new Promise(res => {
+      timeout = setTimeout(() => res(fn(...args)), delay)
+    })
+  }
+}

package/src/reactUtils.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export const addExtraProp = (element, extra, override = true) => React.cloneElement(
+  element,
+  override ? {...element.props,...extra} : {...extra,...element.props},
+  element.props.children
+)

package/src/reduceUtils.jsx

@@ -0,0 +1,6 @@
+import _ from 'lodash/fp'
+
+export const compareBest = (compare) => (best,next) => best ? (compare(best,next) ? next : best) : next
+
+export const toLowest = (getValue = _.identity) => compareBest((best,next) => (getValue(next) < getValue(best)))
+export const toHighest = (getValue = _.identity) => compareBest((best,next) => (getValue(next) > getValue(best)))

package/src/smoothScroll.js

@@ -0,0 +1,58 @@
+// @flow
+// Get the top position of an element in the document
+const getTop = function(element, start) {
+  // return value of html.getBoundingClientRect().top ... IE : 0, other browsers : -pageYOffset
+  if(!element || element.nodeName === 'HTML') return -start
+  return element.getBoundingClientRect().top + start
+}
+// ease in out function thanks to:
+// http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
+const easeInOutCubic = function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }
+
+// calculate the scroll position we should be in
+// given the start and end point of the scroll
+// the time elapsed from the beginning of the scroll
+// and the total duration of the scroll (default 500ms)
+const position = function(start, end, elapsed, duration) {
+  if (elapsed > duration) return end;
+  return start + (end - start) * easeInOutCubic(elapsed / duration); // <-- you can change the easing funtion there
+  // return start + (end - start) * (elapsed / duration); // <-- this would give a linear scroll
+}
+
+// we use requestAnimationFrame to be called by the browser before every repaint
+// if the first argument is an element then scroll to the top of this element
+// if the first argument is numeric then scroll to this location
+// if the callback exist, it is called when the scrolling is finished
+// if context is set then scroll that element, else scroll window
+export const smoothScroll = (el, duration = 500, callback, ctx) => {
+  const context = ctx || window;
+  const start = context.scrollTop || window.pageYOffset;
+  const offset = el instanceof HTMLElement ? 0 : el.offset||0
+
+  const end = offset + (typeof el === 'number' ? Math.round(el) :
+    el instanceof HTMLElement ? getTop(el, start) : getTop(el.target,start))
+
+  const clock = Date.now();
+  const requestAnimationFrame = window.requestAnimationFrame ||
+    window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
+    function(fn){window.setTimeout(fn, 15);};
+
+  const step = () => {
+    const elapsed = Date.now() - clock;
+    if (context !== window) {
+      context.scrollTop = position(start, end, elapsed, duration);
+    }
+    else {
+      window.scroll(window.pageXOffset, position(start, end, elapsed, duration));
+    }
+
+    if (elapsed > duration) {
+      if (typeof callback === 'function') {
+        callback(el);
+      }
+    } else {
+      requestAnimationFrame(step);
+    }
+  }
+  step();
+}

package/src/styled.js

@@ -0,0 +1,177 @@
+// @flow
+import _ from 'lodash/fp'
+import {darken} from 'polished'
+import React from 'react'
+import styled, {css} from 'styled-components'
+import createEmotion from 'create-emotion'
+import {scrollWidth} from './fixMediaQuery'
+import {_s} from './lodashUtils'
+import {callIfFunction} from './utils'
+
+export const getColor = (propsOrColor, hover) => {
+  if (propsOrColor === undefined) {
+    return ({theme})=>theme.colors.gray150
+  }
+  if (typeof propsOrColor==='string') {
+    return ({theme})=>theme.colors[propsOrColor] || propsOrColor
+  }
+  const {theme,...props} = propsOrColor
+  if (props.dark) {
+    return darken(0.1, getColor({theme, ..._.unset( 'dark', props)}))
+  } else if (hover && props.hover) {
+    return getColor({theme, color: props.hover})
+  } else if (props.color) {
+    return theme.colors[props.color] || props.color
+  } else if (props.highlight) {
+    return theme.colors.main
+  } else if (props.alert) {
+    return theme.colors.alert
+  } else if (props.success) {
+    return theme.colors.success
+  } else {
+    return theme.colors.gray150
+  }
+}
+
+export const getMargin = (enumeratedMargins) => (props) => enumeratedMargins[props.margin] || props.margin || enumeratedMargins['default'] || 0
+
+/**
+ * Returns the value of `props[path]` or `defaultValue`
+ * @example
+ * const Button = styled.button`
+ *  color: ${prop('color', 'red')};
+ * `
+ */
+export const prop = (path,defaultValue) =>
+  (props = {}) => _.get(path.trim(), props) || defaultValue
+
+export const customTheme = (type) =>
+  (props = {}) => _.get(["theme","startlibs",type], props) || ''
+
+/**
+ * Returns `pass` if prop is truthy. Otherwise returns `fail`
+ * @example
+ * // usage with styled-theme
+ * import styled from 'styled-components'
+ * import { ifProp } from 'styled-tools'
+ * import { palette } from 'styled-theme'
+ *
+ * const Button = styled.button`
+ *  background-color: ${ifProp('transparent', 'transparent', palette(0))};
+ *  color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
+ *  font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
+ *`
+ */
+export const ifProp = (path, pass, fail) => {
+  if (pass && !_.isFunction(pass)) { // old version
+    return (props = {}) => {
+      let result = false
+      if (Array.isArray(path)) {
+        result = path.every(p=> testSinglePath(props,p))
+      } else if (typeof path === 'object') {
+        result = !Object.entries(path).find(([k,v])=>props[k]!==v)
+      } else {
+        result = testSinglePath(props,path)
+      }
+      return result ? pass : fail
+    }
+  } else {
+    return (...argsTrue) => {
+      const check = pass || _.identity
+      const fn = props => check(_.get(path,props)) ? css(...argsTrue) : ''
+      fn.orElse = (...argsFalse) => (props) => check(_.get(path,props)) ? css(...argsTrue) : css(...argsFalse)
+      return fn
+    }
+  }
+}
+export const ifPropEquals = (path,str) => ifProp(path,_.isEqual(str))
+export const ifNotProp = (path) => ifProp(path,v => !v)
+
+const checkCustomScreenWidth = (sizeParis,customWidth) => {
+  const currentWidth = callIfFunction(customWidth)
+  return !sizeParis.find(([size,type]) => {
+    if (type === "min-width") {
+      return currentWidth < size
+    }
+    if (type === "max-width") {
+      return currentWidth > size
+    }
+  })
+}
+
+export const media = (...sizePairs) => (...args) => {
+  return css`
+  ${props => 
+    props.theme?.overrideMediaWidth
+    ? (checkCustomScreenWidth(sizePairs,props.theme?.overrideMediaWidth) ? css(...args) : "") 
+    : css`@media ${sizePairs.map(([size,type]) => `(${type}: ${size+scrollWidth}px)`).join(' and ')} {
+      ${ css(...args) }
+    }`
+  }`
+}
+
+media.mobile = media([600,'max-width'])
+media.between = (min,max) => media([min,'min-width'],[max,'max-width'])
+media.max = (n) => media([n,'max-width'])
+media.min = (n) => media([n,'min-width'])
+media.desktop = media([601,'min-width'])
+
+export const vheight = (strings,size) => {
+  const propType = strings[0]
+  const calc = (strings[1]||"").replace(";","").trim()
+  return `
+  ${propType} ${calc ? `calc(${size}vh ${calc})` : `${size}vh`};
+  ${propType} ${calc ? `calc(calc(var(--vh, 1vh) * ${size}) ${calc})` : `calc(var(--vh, 1vh) * ${size})`};
+  `
+}
+
+function testSinglePath(props,path) {
+  if (typeof path === 'string') {
+    return !!_s.get(path, props)
+  } else if (typeof path === 'number') {
+    return !!props[path]
+  } else {
+    return false
+  }
+}
+
+const getFrameOffset = (i,total) => Math.round(i*100/(total-1))
+
+
+const emotion = createEmotion({
+  nonce: (typeof document !== 'undefined' &&
+    (document.querySelector('meta[property="csp-nonce"]') || {}).content) || 'animation_nonce'
+})
+
+export const oneWayAnimation = (...frames) => {
+  return emotion.keyframes`
+  ${frames.map((frame,i) =>
+    !frame ? '' : `${getFrameOffset(i,frames.length)}% {
+      ${frame}
+    }`
+  )}`
+}
+
+export const twoWayAnimation = (...frames) => [frames,_.reverse(frames)].map((frames)=>oneWayAnimation(...frames))
+
+export const animationTiming = (props) => (...animations) => animations.filter(_=>_).map(_=>_+' '+props).join(',')
+
+export const identityTranslateFrames = oneWayAnimation('transform: translateY(0);', 'transform: translateY(0);')
+export const identityOpacityFrames = oneWayAnimation('opacity: 1;', 'opacity:1;')
+
+export const styledExtend = ({target,componentStyle}) => (...template) => {
+  const wasStatic = !_.find(_.isFunction,componentStyle.rules)
+  const v = styled(target)(...template,...(wasStatic ? [] : [() => ""]))
+  v.componentStyle.rules = [...componentStyle.rules,...v.componentStyle.rules]
+  return v
+}
+
+export const printerMedia = (...args) => (props) =>
+  props.theme.printMode
+  ? css(...args)
+  : css`@media print { ${css(...args)} }`
+
+export const notPrinterMedia = (...args) => (props) =>
+  props.theme.printMode
+    ? ''
+    : css`@media screen { ${css(...args)} }`

package/src/timeUtils.jsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+export const SECOND = 1000
+export const MINUTE = SECOND * 60
+export const HOUR = MINUTE * 60
+export const DAY = HOUR * 24
+export const WEEK = DAY * 7
+export const MONTH = DAY * 31
+export const YEAR = DAY * 366
+
+export const getStartOfDay = (d,utc = false) => {
+  const date = new Date(d)
+  if (utc) {
+    date.setUTCHours(0,0,0,0)
+  } else {
+    date.setHours(0,0,0,0)
+  }
+  return date
+}
+export const isSameDay = (a,b,utc = false) => getStartOfDay(a,utc).getTime() === getStartOfDay(b,utc).getTime()
+
+
+
+export const intervalsIntersect = ([a1, a2], [b1, b2]) =>
+  (b2 >= a1) && (b1 <= a2)
+
+export const intervalsIntersectExclusive = ([a1, a2], [b1, b2]) =>
+  (b2 > a1) && (b1 < a2)
+
+export const intervalsIntersection = (a, b) => {
+  if (!intervalsIntersect(a,b)) {
+    return []
+  }
+  return [[Math.max(a[0], b[0]), Math.min(a[1], b[1])]]
+}
+
+export const diffIntervals = ([a1, a2], [b1, b2]) => {
+  if (
+    a1 >= b2 || // a after b
+    b1 >= a2 // a before b
+  ) {
+    return [[a1, a2]]
+  } else if (a1 > b1 && a2 < b2) { // a inside b
+    return []
+  }
+  if (b1 > a1 && b2 < a2) { // b inside a
+    return [[a1, b1], [b2, a2]]
+  }
+  if (b1 <= a1) { // b intersecting left of a
+    return [[b2, a2]]
+  } else { // b intersecting right of a
+    return [[a1, b1]]
+  }
+}
+
+export const blockDiffIntervals = (a, b) => intervalsIntersect(a, b) ? [] : [a]
+export const startBlockDiffIntervals = (a, b) => intervalsIntersectExclusive(a, b) && a[0] >= b[0] ? [] : [a]

package/src/timerUtils.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import styled from 'styled-components/macro'
+
+styled
+export const timerPromise = (time) => new Promise((res) => setTimeout(res,time))
+
+export const cancelableTimer = (res,time) => {
+  const v = setTimeout(res,time)
+  return () => clearTimeout(v)
+}