@startlibs/core 1.0.2 → 1.0.3

package/src/StartlibsProvider.jsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import {fixMediaQuery,callIfFunction} from '@startlibs/utils'
+import {SlotProvider, clearPopups} from '@startlibs/core'
+
+export const StartlibsContext = React.createContext({})
+export const PopupContext = React.createContext({})
+export const StartlibsMetacontext = React.createContext(()=>{})
+
+export const StartlibsConsumer = StartlibsContext.Consumer
+
+const wrappeStyle = {height: '100%'}
+
+
+export class StartlibsProvider extends React.Component {
+
+  componentDidMount() {
+    fixMediaQuery()
+    const addVHFix = () => {
+      let vh = window.innerHeight * 0.01;
+      document.documentElement?.style?.setProperty('--vh', `${vh}px`);
+    }
+    window.addEventListener('resize', _.debounce(200, addVHFix))
+    addVHFix()
+  }
+
+  openToggles = new Map()
+
+  popupToggleRender = ({isOpen,close},ref) => {
+    if (isOpen && !this.openToggles.has(ref)) {
+      this.closePopup()
+      this.openToggles.set(ref,close)
+    }
+  }
+  closePopup = () => {
+    clearPopups()
+  }
+
+  startlibsMeta = new Map()
+
+  getMeta = (key,initValue) => {
+    const exists = this.startlibsMeta.get(key)
+    if (exists) return exists
+    this.startlibsMeta.set(key,callIfFunction(initValue))
+    return initValue
+  }
+
+  render() {
+    return <StartlibsContext.Provider value={this.props.value}>
+      <StartlibsMetacontext.Provider value={this.getMeta}>
+      <PopupContext.Provider value={this.popupToggleRender}>
+        <div style={wrappeStyle} onClick={this.closePopup}>
+          <SlotProvider>
+              {this.props.children}
+          </SlotProvider>
+        </div>
+      </PopupContext.Provider>
+      </StartlibsMetacontext.Provider>
+    </StartlibsContext.Provider>
+  }
+}

package/src/hocs/WithLazyResource.jsx

@@ -0,0 +1,32 @@
+import React, {useReducer} from 'react'
+import _ from 'lodash/fp'
+import {ifUndefined} from '@startlibs/utils'
+
+const addExtraProp = (element, extra, override = true) => React.cloneElement(
+  element,
+  override ? {...element.props,...extra} : {...extra,...element.props},
+  element.props.children
+)
+
+export const WithLazyPlaceholder = ({value, fallback, children, forwardProps = false,...props}) => {
+  return <React.Suspense
+    fallback={React.Children.map(children(fallback,{isLoading:true}), (child) => React.isValidElement(child) ? addExtraProp(child, {isLoading: true}, false) : child)}
+  >
+    <Load value={value} children={children} forwardProps={forwardProps && props}/>
+  </React.Suspense>
+}
+
+
+export const WithLazyResource = ({value, wrap,fallback,children,forwardProps = false,...props}) => {
+
+  return (wrap || fallback !== undefined)
+    ? <React.Suspense fallback={ifUndefined(fallback,null)}><Load value={value} forwardProps={forwardProps && props} children={children}/></React.Suspense>
+    : <Load value={value} children={children} forwardProps={forwardProps && props}/>
+}
+
+const Load = ({value,children,forwardProps}) => {
+  const loaded = _.isArray(value) ? (value.forEach(v => v.promise()) || value.map(v => v.read())) : value.read()
+  const [,update] = useReducer((s) => s+1, 0)
+  const refresh = () => Promise.all(_.isArray(value) ? value.map(v => v.refresh().promise()) : [value.refresh().promise()]).then(update)
+  return forwardProps ? addExtraProp(children(loaded,{refresh,update}),forwardProps) : children(loaded, {refresh,update})
+}

package/src/hocs/WithRef.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react'
+
+export class WithRef extends React.Component {
+
+  constructor(props) {
+    super(props)
+    const total = props.length || props.children.length
+    const refs = new Array(total)
+    for (var i = 0; i < total; i++) {
+      refs[i] = React.createRef()
+    }
+    this.createdRefs = refs
+  }
+
+  render() {
+    const {children} = this.props
+    return children(...this.createdRefs)
+  }
+}

package/src/hocs/Wrapper.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+const valueOrDefault = (v, d) => v === undefined ? d : v
+const mergePropsAndChildren = (a, b) => ({
+  ...a, ...b,
+  children: (a.children && b.children) ?
+            <React.Fragment>{a.children}{b.children}</React.Fragment> : (a.children || b.children)
+})
+
+const wrapIf = (WrapperWithRenderProps, testKeyOrFn, defaultWrapPropsOrFn) => (functionAsChild) => (props) => {
+  const test = typeof testKeyOrFn === 'string' ? props[testKeyOrFn] : testKeyOrFn(props)
+  if (test) {
+    const defaultWrapProps = typeof defaultWrapPropsOrFn === "function" ? defaultWrapPropsOrFn(props) : defaultWrapPropsOrFn
+    if (WrapperWithRenderProps.hasRenderProps) {
+      const Wrapper = WrapperWithRenderProps.Wrapper
+      return <Wrapper {...defaultWrapProps} {...props} ref={undefined}>{(extra) => functionAsChild(mergePropsAndChildren(props, extra))}</Wrapper>
+    } else {
+      return <WrapperWithRenderProps {...defaultWrapProps} {...props} ref={undefined}>{functionAsChild(props)}</WrapperWithRenderProps>
+    }
+  } else {
+    return functionAsChild(props)
+  }
+}
+
+
+const wrapAsDefault = (Wrapper, key, defaultWrapProps) => wrapIf(Wrapper, (props) => valueOrDefault(props[key], true), defaultWrapProps)
+
+const singleWrap = (Wrapper, defaultWrapProps) => wrapIf(Wrapper, () => true, defaultWrapProps)
+
+const wraps = (...autoWrappers) => (Component) => autoWrappers.reduceRight(
+  (acc, autoWrapper) => autoWrapper(acc),
+  (props) => <Component {...props}/>
+)
+
+export const wrap = wraps
+
+wrap.renderProps = (Wrapper) => ({hasRenderProps:true,Wrapper})
+wrap.if = wrapIf
+wrap.always = singleWrap
+wrap.asDefault = wrapAsDefault

package/src/hocs/consumes.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const propsOrConsume = (prop, Consumer,childrenAsFunction) => prop ? childrenAsFunction(prop) : <Consumer>{childrenAsFunction}</Consumer>
+
+const addConsumers = (Component,obj) =>
+  Object.entries(obj)
+    .reduce(
+      (acc, [propKey, Consumer]) => (props) =>
+        propsOrConsume(props[propKey],Consumer,v => acc({[propKey]: v, ...props})),
+      (props) => <Component {...props} />
+    )
+
+export const consumes = (obj) => (Component) => {
+  const withConsumers = addConsumers(Component,obj)
+  return (props) => withConsumers(props)
+}

package/src/hocs/withDialogError.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const withDialogError = (Dialog) => {
+  const ErrorBoundedComponent = React.forwardRef((props,ref) => {
+    return <Dialog ref={ref} {...props}/>
+
+    // const ErrorBoundary = __internals('ErrorBoundary')
+    /*return (
+      <ErrorBoundary Error={props.Error || __internals('DialogError')} closeDialog={props.closeDialog}>
+        <Dialog {...props}/>
+      </ErrorBoundary>
+    )*/
+  })
+  // ErrorBoundedComponent.contextTypes = {startlibs:()=>null}
+  return ErrorBoundedComponent
+}

package/src/hocs/withGroupEvent.jsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import mitt from 'mitt'
+
+export const GroupEventFactory = () => {
+  let emitter = mitt()
+
+  class WithGroupEvent extends React.Component {
+    componentDidMount() {
+      emitter.on('*', this.processEvent)
+    }
+
+    componentWillUnmount() {
+      emitter.off('*',this.processEvent)
+    }
+
+    events = {}
+
+    processEvent = (type, event) => {
+      (this.events[type] || []).forEach(c => c(event))
+    }
+
+    groupEventProps = {
+      on: (type,callback) => {
+        this.events[type] = (this.events[type] || []).concat(callback)
+      },
+      off: (type,callback) => {
+        this.events[type] = (this.events[type] || []).filter(e=>e!==callback)
+      },
+      emit: emitter.emit
+    }
+
+    render() {
+      return this.props.children(this.groupEventProps)
+    }
+  }
+  return WithGroupEvent
+}
+
+export const withGroupEvent = (Component) => {
+  const WithGroupEvent = GroupEventFactory()
+  return React.forwardRef((props,ref) => <WithGroupEvent>{(groupEvent) => <Component {...props} ref={ref} groupEvent={groupEvent}/>}</WithGroupEvent>)
+}
+

package/src/hooks/WithConstant.jsx

@@ -0,0 +1,7 @@
+import React, {useEffect} from 'react'
+import {useLazyConstant} from '@startlibs/core'
+
+export const WithConstant = ({inputs=[],value,children}) => {
+  const constant = useLazyConstant(value,inputs)
+  return children(constant)
+}

package/src/hooks/WithEffect.jsx

@@ -0,0 +1,6 @@
+import React, {useEffect} from 'react'
+
+export const WithEffect = ({inputs=[],children}) => {
+  useEffect(children,inputs)
+  return null
+}

package/src/hooks/useAsyncEffect.jsx

@@ -0,0 +1,11 @@
+import React, {useEffect} from 'react'
+import {callIfFunction} from '@startlibs/utils'
+
+export const useAsyncEffect = (fn,args) => {
+  useEffect(() => {
+    const result = fn()
+    return () => {
+      result.then(end => callIfFunction(end))
+    }
+  },args)
+}

package/src/hooks/useCallState.js

@@ -0,0 +1,15 @@
+import React, {useMemo, useState} from 'react'
+import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
+
+const isPath = (path) => typeof path === 'string' || typeof path === 'number' || Array.isArray(path)
+
+const getter = (value) => path => isPath(path) ? _s.get(path, value) : value
+
+export const useCallState = (defaultValue, setCallback) => {
+  const [val, setValue] = useState(defaultValue)
+
+  return useMemo(() => {
+    const get = () => val
+    return {get, val, set: setValue}
+  }, [val])
+}

package/src/hooks/useCallbackStable.jsx

@@ -0,0 +1,12 @@
+import React, {useInsertionEffect} from 'react'
+
+export const useCallbackStable = (fn) => {
+  const ref = React.useRef([fn, (...args) => ref[0](...args)]).current;
+  // Per Dan Abramov: useInsertionEffect executes marginally closer to the
+  // correct timing for ref synchronization than useLayoutEffect on React 18.
+  // See: https://github.com/facebook/react/pull/25881#issuecomment-1356244360
+  useInsertionEffect(() => {
+    ref[0] = fn;
+  });
+  return ref[1];
+}

package/src/hooks/useConstant.js

@@ -0,0 +1,20 @@
+import React, {useMemo, useRef} from 'react'
+import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
+
+const not_defined = {}
+
+export const useConstant = (value) => {
+  const ref = useRef(not_defined)
+  if (ref.current === not_defined) {
+    ref.current = value
+  }
+  return ref.current
+}
+
+export const useLazyConstant= (value) => {
+  const ref = useRef(not_defined)
+  if (ref.current === not_defined) {
+    ref.current = callIfFunction(value)
+  }
+  return ref.current
+}

package/src/hooks/useConsumerCatalog.jsx

@@ -0,0 +1,21 @@
+import React, {useEffect, useMemo} from 'react'
+import {callMany,mapGetOrSet} from '@startlibs/utils'
+import {useRefState} from '@startlibs/core'
+
+export const useConsumerCatalog = (mountCallback,unmountCallback) => {
+  const elements = useRefState([])
+
+  const register = callMany((element) => elements.set((elements) => elements.concat([element])), mountCallback)
+  const unregister = callMany((element) =>  elements.set((elements) => elements.filter(_ => _ !== element)), unmountCallback)
+
+  const manager = useMemo(()=> ({register,unregister}), [])
+
+  return [elements.get,manager]
+}
+
+export const useCatalogManager = ({register,unregister},ref) => {
+  useEffect(() => {
+    register(ref)
+    return () => unregister(ref)
+  },[ref])
+}

package/src/hooks/useEnsureRef.js

@@ -0,0 +1,7 @@
+import React, {useMemo, useRef} from 'react'
+import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
+
+export const useEnsureRef = (forwardedRef) => {
+  const ref = useRef()
+  return forwardedRef || ref
+}

package/src/hooks/useForceUpdate.jsx

@@ -0,0 +1,16 @@
+import {useState} from 'react'
+import {willUseSharedState} from '@startlibs/core'
+
+export const useForceUpdate = () => {
+  const [value, setValue] = useState(0); // integer state
+  return () => setValue(value => value + 1); // update the state to force render
+}
+
+export const willUseForceUpdate = () => {
+  const [useValue,,set] = willUseSharedState()
+  const useForceUpdate = () => {
+    const [v,setV] = useValue(0)
+    return () => setV(value => value + 1)
+  }
+  return [useForceUpdate,() => set(value => value + 1)]
+}

package/src/hooks/useIsUnmounted.jsx

@@ -0,0 +1,12 @@
+import {useEffect, useRef} from 'react'
+
+export const useIsUnmounted = () => {
+  const unmounted = useRef(false)
+
+  useEffect(() => {
+    unmounted.current = false
+    return () => { unmounted.current = true }
+  }, [])
+
+  return () => unmounted.current
+}

package/src/hooks/usePopupToggle.js

@@ -0,0 +1,30 @@
+import React, {useRef, useContext} from 'react'
+import {useToggle} from '@startlibs/core'
+import {callIfFunction} from '@startlibs/utils'
+
+let prevOpenToggleClose = () => {}
+let sameTick = false
+
+export const clearPopups = () => {
+  if (!sameTick) {
+    prevOpenToggleClose()
+    prevOpenToggleClose = () => {}
+  }
+}
+
+export const usePopupToggle = (startWith,callback) => {
+  const toggle = useToggle(startWith,(v,prev) => {
+    const result = callIfFunction(callback,v,prev)
+    if (result === false) { return false}
+    if (v !== false && prevOpenToggleClose !== toggle.close) {
+      prevOpenToggleClose()
+      prevOpenToggleClose = toggle.close
+      sameTick = true
+      window.setTimeout(()=>sameTick = false, 1)
+    }
+    if (v === false) {
+      prevOpenToggleClose = () => {}
+    }
+  })
+  return toggle
+}

package/src/hooks/usePrevious.jsx

@@ -0,0 +1,27 @@
+import {useEffect, useRef} from 'react'
+
+export function usePrevious(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+
+export function usePreviousUnique(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => {
+    if (value !== ref.current) {
+      ref.current = value;
+    }
+  });
+  return ref.current;
+}
+
+export function usePreviousForEffect(value,initialValue) {
+  const ref = useRef(initialValue);
+  useEffect(() => () => {
+    ref.current = value;
+  },[value]);
+  return ref.current;
+}

package/src/hooks/useRecycleFocus.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import _ from 'lodash/fp'
+import styled from 'styled-components'
+import {useEventListener} from "@startlibs/utils";
+
+styled
+
+const TabFocus = styled.div`width:0;height:0;position:absolute;`
+export const useRecycleFocus = (ref, enabled = true,lastIndex) => {
+
+  const recycle = i => (e) => {
+    if (!enabled || !ref.current) {
+      return
+    }
+    const nextTab = ref.current.querySelectorAll('[tabindex]')
+    if (nextTab) {
+      if (i<0) {
+        console.log(nextTab[1])
+        nextTab[1].focus()
+      } else {
+        console.log(nextTab[nextTab.length - 2])
+        nextTab[nextTab.length - 2].focus()
+      }
+    }
+  }
+
+  return [<TabFocus tabIndex={1} onFocus={recycle(0)}></TabFocus>,<TabFocus tabIndex={lastIndex || 1} onFocus={recycle(-1)}></TabFocus>]
+}

package/src/hooks/useRefMemo.jsx

@@ -0,0 +1,10 @@
+import React, {useRef} from 'react'
+import  {callIfFunction} from '@startlibs/utils'
+
+export const useRefMemo = (value) => {
+  const ref = useRef(value)
+  if (ref.current !== value) {
+    ref.current = callIfFunction(value)
+  }
+  return ref
+}

package/src/hooks/useRefState.js

@@ -0,0 +1,26 @@
+import React, {useMemo, useRef} from 'react'
+import {_s, callIfFunction, callIfFunctions} from '@startlibs/utils'
+
+const isPath = (path) => typeof path === 'string' || typeof path === 'number' || Array.isArray(path)
+
+const getter = (value) => path => path !== "" && isPath(path) ? _s.get(path,value) : value
+
+const uninitialized = {}
+
+export const useRefState = (defaultValue, setCallback) => {
+  const ref = useRef(uninitialized)
+  if (ref.current === uninitialized) {
+    ref.current = callIfFunction(defaultValue)
+  }
+  return useMemo(() => {
+    const get = (path) => getter(ref.current)(path)
+    const set = (v, config) => {
+      const prev = ref.current
+      ref.current = callIfFunctions(v, () => get())
+      if (prev !== ref.current && (!config || !config.ignoreCallback)) {
+        callIfFunction(setCallback, prev, ref.current)
+      }
+    }
+    return {get, set}
+  }, [])
+}