@kaspernj/api-maker 1.0.2053 → 1.0.2054

package/src/use-input.js

@@ -1,159 +0,0 @@
-import {dig, digg} from "diggerize"
-import {useCallback, useEffect, useMemo, useRef} from "react"
-import idForComponent from "./inputs/id-for-component"
-import nameForComponent from "./inputs/name-for-component"
-import strftime from "strftime"
-import useShape from "set-state-compare/src/use-shape"
-import useValidationErrors from "./use-validation-errors"
-
-const useInput = ({props, wrapperOptions, ...useInputRestProps}) => {
-  const useInputRestPropsKeys = Object.keys(useInputRestProps)
-
-  if (useInputRestPropsKeys.length > 0) {
-    throw new Error(`Unknown props given to useInput: ${useInputRestPropsKeys.join(", ")}`)
-  }
-
-  const s = useShape(props)
-  const backupRef = useRef()
-
-  s.useStates({
-    form: undefined
-  })
-
-  useEffect(() => {
-    setForm()
-  }, [s.props.inputRef?.current])
-
-  s.meta.fakeComponent = {props}
-  s.meta.isCheckbox = props.type == "checkbox" || wrapperOptions?.type == "checkbox"
-  s.meta.isSelect = wrapperOptions?.type == "select"
-
-  const formatValue = useCallback((value) => {
-    const {formatValue} = s.props
-
-    if (formatValue) {
-      return formatValue(value)
-    } else if (value instanceof Date && !isNaN(value.getTime())) {
-      // We need to use a certain format for datetime-local
-      if (inputType() == "datetime-local") {
-        return strftime("%Y-%m-%dT%H:%M:%S", value)
-      } else if (inputType() == "date") {
-        return strftime("%Y-%m-%d", value)
-      }
-    }
-
-    return value
-  }, [])
-
-  const inputDefaultChecked = useCallback(() => {
-    if ("defaultChecked" in s.props) {
-      return s.props.defaultChecked
-    } else if (s.props.attribute && s.props.model) {
-      if (!s.props.model[s.props.attribute])
-        throw new Error(`No such attribute: ${s.props.attribute}`)
-
-      return s.props.model[s.props.attribute]()
-    }
-  }, [])
-
-  const inputDefaultValue = useCallback(() => {
-    if ("defaultValue" in s.props) {
-      return formatValue(s.props.defaultValue)
-    } else if (s.props.model && s.props.attribute) {
-      if (!s.props.model[s.props.attribute]) {
-        throw new Error(`No such attribute defined on resource: ${digg(s.props.model.modelClassData(), "name")}#${s.props.attribute}`)
-      }
-
-      return formatValue(s.props.model[s.props.attribute]())
-    }
-  }, [])
-
-  const inputRef = useCallback(() => s.props.inputRef || backupRef)
-
-  const inputType = useCallback(() => {
-    if ("type" in s.props) {
-      return s.props.type
-    } else if (s.m.isCheckbox) {
-      return "checkbox"
-    } else {
-      return "text"
-    }
-  }, [])
-
-  const label = useCallback(() => {
-    if ("label" in s.props) {
-      return s.props.label
-    } else if (s.props.attribute && s.props.model) {
-      return s.props.model.modelClass().humanAttributeName(s.props.attribute)
-    }
-  }, [])
-
-  const setForm = useCallback(() => {
-    const inputElement = inputRef().current
-
-    let form
-
-    if (inputElement) form = dig(inputElement, "form")
-    if (form && form != s.s.form) s.set({form})
-  }, [])
-
-  const getId = useCallback(() => idForComponent(s.m.fakeComponent), [])
-  const getName = useCallback(() => nameForComponent(s.m.fakeComponent), [])
-
-  const getInputProps = useCallback(() => {
-    const givenInputProps = s.props.inputProps || {}
-    const inputProps = Object.assign(
-      {
-        id: getId(),
-        name: getName(),
-        ref: inputRef()
-      },
-      givenInputProps
-    )
-
-    if (s.m.isCheckbox) {
-      if ("checked" in s.props) {
-        inputProps.checked = s.props.checked
-      }
-
-      if ("defaultChecked" in s.props || (s.props.attribute && s.props.model)) {
-        inputProps.defaultChecked = inputDefaultChecked()
-      }
-    } else if ("value" in s.props) {
-      inputProps.value = s.props.value
-    } else if (!("value" in s.props)) {
-      inputProps.defaultValue = inputDefaultValue()
-    }
-
-    return inputProps
-  }, [])
-
-  const {inputProps: oldInputProps, wrapperOpts: oldWrapperOpts, ...restProps} = props
-  const type = inputType()
-
-  s.meta.inputProps = getInputProps()
-  s.meta.inputNameWithoutId = useMemo(() => s.m.inputProps.name?.replace(/\[(.+)_id\]$/, "[$1]"), [s.m.inputProps.name])
-
-  if (!s.m.inputProps.ref) throw new Error("No input ref?")
-  if (!s.m.isSelect) s.m.inputProps.type = type
-
-  const {validationErrors} = useValidationErrors((validationError) =>
-    validationError.inputName &&
-      s.m.inputProps.name &&
-      (validationError.inputName == s.m.inputProps.name || validationError.inputName == s.m.inputNameWithoutId)
-  )
-
-  const wrapperOpts = {
-    errors: validationErrors,
-    form: s.s.form,
-    label: label()
-  }
-
-  return {
-    inputProps: s.m.inputProps,
-    wrapperOpts,
-    restProps
-  }
-}
-
-export default useInput

package/src/use-model-event.js

@@ -1,60 +0,0 @@
-import {useCallback, useLayoutEffect, useMemo} from "react"
-import debounceFunction from "debounce"
-import ModelEvents from "./model-events"
-import useShape from "set-state-compare/src/use-shape"
-
-const apiMakerUseModelEvent = (model, event, onCallback, props) => {
-  const {active = true, debounce, onConnected, ...restProps} = props || {}
-
-  if (Object.keys(restProps).length > 0) {
-    throw new Error(`Unknown props given to apiMakerUseModelEvent: ${Object.keys(restProps).join(", ")}`)
-  }
-
-  const s = useShape({active, debounce, model, onCallback})
-
-  const debounceCallback = useMemo(() => {
-    if (typeof debounce == "number") {
-      return debounceFunction(s.p.onCallback, debounce)
-    } else {
-      return debounceFunction(s.p.onCallback)
-    }
-  }, [debounce])
-
-  s.updateMeta({debounceCallback})
-
-  const onCallbackCallback = useCallback((...args) => {
-    if (!s.p.active) {
-      return
-    }
-
-    if (s.p.debounce) {
-      s.m.debounceCallback(...args)
-    } else {
-      s.p.onCallback(...args)
-    }
-  }, [])
-
-  useLayoutEffect(() => {
-    let connectEvent, onConnectedListener
-
-    if (model) {
-      connectEvent = ModelEvents.connect(model, event, onCallbackCallback)
-
-      if (onConnected) {
-        onConnectedListener = connectEvent.events.addListener("connected", onConnected)
-      }
-    }
-
-    return () => {
-      if (onConnectedListener) {
-        connectEvent.events.removeListener("connected", onConnected)
-      }
-
-      if (connectEvent) {
-        connectEvent.unsubscribe()
-      }
-    }
-  }, [model?.id()])
-}
-
-export default apiMakerUseModelEvent

package/src/use-model.js

@@ -1,189 +0,0 @@
-import {useCallback, useLayoutEffect, useMemo} from "react"
-import Devise from "./devise"
-import * as inflection from "inflection"
-import ModelEvents from "./model-events"
-import useQueryParams from "on-location-changed/build/use-query-params"
-import useShape from "set-state-compare/src/use-shape"
-
-const useModel = (modelClassArg, argsArg = {}) => {
-  const queryParams = useQueryParams()
-  let args, modelClass
-
-  if (typeof argsArg == "function") {
-    args = argsArg({modelClass})
-  } else {
-    args = argsArg
-  }
-
-  const s = useShape(args)
-
-  s.useStates({
-    model: undefined,
-    notFound: undefined
-  })
-
-  if ("active" in s.props && !s.props.active) {
-    s.meta.active = false
-  } else {
-    s.meta.active = true
-  }
-
-  if (typeof modelClassArg == "object") {
-    modelClass = modelClassArg.callback({queryParams})
-  } else {
-    modelClass = modelClassArg
-  }
-
-  const paramsVariableName = `${modelClass.modelName().paramKey()}_id`
-  let modelId
-
-  if (args.loadByQueryParam) {
-    modelId = args.loadByQueryParam({queryParams})
-  } else if (!args.query) {
-    if (!args.match) throw new Error("Both 'loadByQueryParam' and 'match' wasn't given")
-
-    modelId = args.match.params[paramsVariableName] || args.match.params.id
-  }
-
-  const modelVariableName = inflection.camelize(modelClass.modelClassData().name, true)
-  const cacheArgs = [modelId]
-
-  const loadExistingModel = useCallback(async () => {
-    let query
-
-    if (s.m.modelId) {
-      query = modelClass.ransack({id_eq: s.m.modelId})
-    } else if (s.m.args.query) {
-      query = s.m.args.query.clone()
-    } else {
-      throw new Error(`No model ID was given: ${s.m.modelId} by '${paramsVariableName}' in query params: ${Object.keys(s.props.match.params).join(", ")}`)
-    }
-
-    if (s.props.abilities) query.abilities(s.p.abilities)
-    if (s.props.preload) query.preload(s.p.preload)
-    if (s.props.select) query.select(s.p.select)
-
-    const model = await query.first()
-
-    s.set({model, notFound: !model})
-  }, [])
-
-  const loadNewModel = useCallback(async () => {
-    const ModelClass = modelClass
-    const paramKey = ModelClass.modelName().paramKey()
-    const modelDataFromParams = s.m.queryParams[paramKey] || {}
-
-    let defaults = {}
-
-    if (s.props.newIfNoId?.defaults) {
-      defaults = await s.props.newIfNoId.defaults()
-    }
-
-    const modelData = Object.assign(defaults, s.props.newAttributes, modelDataFromParams)
-    const model = new ModelClass({
-      isNewRecord: true,
-      data: {a: modelData}
-    })
-
-    s.set({model})
-  }, [])
-
-  const loadModel = useCallback(async () => {
-    if (!s.m.active) {
-      // Not active - don't do anything
-    } else if (s.props.newIfNoId && !s.m.modelId) {
-      return await loadNewModel()
-    } else if (!s.props.optional || s.m.modelId | s.m.args.query) {
-      return await loadExistingModel()
-    }
-  }, [])
-
-  const onDestroyed = useCallback(({model}) => {
-    const forwardArgs = {model}
-
-    forwardArgs[s.m.modelVariableName] = model
-
-    s.p.onDestroyed(forwardArgs)
-  }, [])
-
-  const onSignedIn = useCallback(() => {
-    loadModel()
-  }, [])
-
-  const onSignedOut = useCallback(() => {
-    loadModel()
-  }, [])
-
-  if (args.cacheArgs) {
-    cacheArgs.push(...args.cacheArgs)
-  }
-
-  s.updateMeta({args, modelId, modelVariableName, queryParams})
-
-  useMemo(
-    () => { loadModel() },
-    cacheArgs
-  )
-
-  useLayoutEffect(() => {
-    let reloadModelCallback
-
-    if (args.events) {
-      reloadModelCallback = args.events.addListener("reloadModel", loadModel)
-    }
-
-    return () => {
-      if (reloadModelCallback) {
-        args.events.removeListener("reloadModel", loadModel)
-      }
-    }
-  }, [args.events])
-
-  useLayoutEffect(() => {
-    let connectUpdated
-
-    if (s.s.model && args.eventUpdated) {
-      connectUpdated = ModelEvents.connectUpdated(s.s.model, loadModel)
-    }
-
-    return () => {
-      connectUpdated?.unsubscribe()
-    }
-  }, [args.eventUpdated, s.s.model?.id()])
-
-  useLayoutEffect(() => {
-    Devise.events().addListener("onDeviseSignIn", onSignedIn)
-    Devise.events().addListener("onDeviseSignOut", onSignedOut)
-
-    return () => {
-      Devise.events().removeListener("onDeviseSignIn", onSignedIn)
-      Devise.events().removeListener("onDeviseSignOut", onSignedOut)
-    }
-  })
-
-  useLayoutEffect(() => {
-    let connectDestroyed
-
-    if (s.s.model && args.onDestroyed) {
-      connectDestroyed = ModelEvents.connectDestroyed(s.s.model, onDestroyed)
-    }
-
-    return () => {
-      connectDestroyed?.unsubscribe()
-    }
-  }, [args.onDestroyed, s.s.model?.id()])
-
-  const result = {
-    model: s.s.model,
-    modelId,
-    notFound: s.s.notFound
-  }
-
-  result[modelVariableName] = s.s.model
-  result[`${modelVariableName}Id`] = modelId
-  result[`${modelVariableName}NotFound`] = s.s.notFound
-
-  return result
-}
-
-export default useModel

package/src/use-resize-observer.js

@@ -1,24 +0,0 @@
-import {useCallback, useLayoutEffect, useMemo} from "react"
-import useShape from "set-state-compare/src/use-shape"
-
-const useResizeObserver = (element, callback) => {
-  const s = useShape({callback})
-  const onResize = useCallback((...args) => {
-    s.p.callback(...args)
-  }, [])
-  const observer = useMemo(() => new ResizeObserver(onResize), [])
-
-  useLayoutEffect(() => {
-    if (element) {
-      observer.observe(element)
-    }
-
-    return () => {
-      if (element) {
-        observer.disconnect()
-      }
-    }
-  }, [element])
-}
-
-export default useResizeObserver

package/src/use-router.jsx

@@ -1,128 +0,0 @@
-import config from "./config"
-import escapeStringRegexp from "escape-string-regexp"
-import * as inflection from "inflection"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import {useCallback, useMemo} from "react"
-import useShape from "set-state-compare/src/use-shape"
-
-const useRouterPropTypes = propTypesExact({
-  locales: PropTypes.array.isRequired,
-  path: PropTypes.string,
-  routeDefinitions: PropTypes.object.isRequired,
-  routes: PropTypes.object.isRequired
-})
-
-const useRouter = (props) => {
-  PropTypes.checkPropTypes(useRouterPropTypes, props, "prop", "useRouter")
-
-  const s = useShape(props)
-
-  const findRouteParams = useCallback((routeDefinition) => {
-    const result = []
-    const parts = routeDefinition.path.split("/")
-
-    for (const part of parts) {
-      if (part.match(/^:([a-z_]+)$/))
-        result.push(part)
-    }
-
-    return result
-  }, [])
-
-  const getPath = useCallback(() => {
-    let path = s.p.path || window.location.pathname
-
-    path = path.replace(/[/]+$/, "")
-
-    return path
-  }, [])
-
-  const getRouteDefinitions = useCallback(() => s.p.routeDefinitions || config.getRouteDefinitions(), [])
-  const getRoutes = useCallback(() => s.p.routes || config.getRoutes(), [])
-
-  const parseRouteDefinitions = useCallback(() => {
-    const routeDefinitions = getRouteDefinitions()
-    const routes = getRoutes()
-    const regex = /:([A-z\d_]+)/
-    const parsedRouteDefinitions = []
-
-    for (const locale of s.p.locales) {
-      for (const routeDefinition of routeDefinitions.routes) {
-        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
-        const params = findRouteParams(routeDefinition)
-
-        params.push({locale})
-
-        if (!(routePathName in routes))
-          throw new Error(`${routePathName} not found in routes: ${Object.keys(routes, ", ")}`)
-
-        const routePath = routes[routePathName](...params).replace(/[/]+$/, "")
-        const groups = []
-        let pathRegexString = "^"
-
-        pathRegexString += escapeStringRegexp(routePath)
-
-        while (true) {
-          const match = pathRegexString.match(regex)
-
-          if (!match) break
-
-          const variableName = match[1]
-
-          groups.push(variableName)
-
-          pathRegexString = pathRegexString.replace(match[0], "([^/]+)")
-        }
-
-        pathRegexString += "$"
-
-        const pathRegex = new RegExp(pathRegexString)
-
-        parsedRouteDefinitions.push({groups, pathRegex, routeDefinition})
-      }
-    }
-
-    return parsedRouteDefinitions
-  }, [])
-
-  const parsedRouteDefinitions = useMemo(() => parseRouteDefinitions(), [])
-
-  s.updateMeta({parsedRouteDefinitions})
-
-  const findMatchingRoute = useCallback(() => {
-    const path = getPath()
-
-    for (const parsedRouteDefinition of s.m.parsedRouteDefinitions) {
-      const match = path.match(parsedRouteDefinition.pathRegex)
-      let matched, params
-
-      if (match) {
-        matched = true
-        params = {}
-
-        for (const groupKey in parsedRouteDefinition.groups) {
-          const groupName = parsedRouteDefinition.groups[groupKey]
-
-          params[groupName] = match[Number(groupKey) + 1]
-        }
-      }
-
-      if (path == "" && parsedRouteDefinition.routeDefinition.path == "/") matched = true
-      if (matched) {
-        return {params, parsedRouteDefinition}
-      }
-    }
-  }, [])
-
-  const matchingRoute = findMatchingRoute()
-  const params = matchingRoute?.params || {}
-  const match = {
-    matchingRoute,
-    params
-  }
-
-  return {match}
-}
-
-export default useRouter

package/src/use-screen-layout.js

@@ -1,49 +0,0 @@
-import {Platform, useWindowDimensions} from "react-native"
-
-const getWindowLayout = (width) => {
-  if (width <= 575) {
-    return "xs"
-  } else if (width <= 767) {
-    return "sm"
-  } else if (width <= 991) {
-    return "md"
-  } else if (width <= 1199) {
-    return "lg"
-  } else if (width <= 1399) {
-    return "xl"
-  } else if (width >= 1400) {
-    return "xxl"
-  } else {
-    console.error(`Couldn't determine window layout from width: ${width}`)
-  }
-}
-
-const useScreenLayout = () => {
-  if (Platform.OS == "web") {
-    const shared = useMemo(() => ({}))
-
-    shared.width = window.innerWidth
-
-    const [screenLayout, setScreenLayout] = useState(() => getWindowLayout(shared.width))
-
-    const onResize = useCallback(() => {
-      const newWindowLayout = getWindowLayout(window.innerWidth)
-
-      if (shared.screenlayout != newWindowLayout) {
-        setScreenLayout(newWindowLayout)
-      }
-    }, [])
-
-    useEventListener(window, "resize", onResize)
-
-    shared.screenLayout = screenLayout
-
-    return shared.screenLayout
-  } else {
-    const windowDimensions = useWindowDimensions()
-
-    return getWindowLayout(windowDimensions.width)
-  }
-}
-
-export default useScreenLayout

package/src/use-styles.js

@@ -1,66 +0,0 @@
-import config from "./config"
-import {digg} from "diggerize"
-import * as inflection from "inflection"
-import useBreakpoint from "./use-breakpoint"
-import {useMemo} from "react"
-
-const handleStringStyle = (styles, listOfStyles, breakpoint, breakpointsReverse, arg) => {
-  if (!(arg in styles)) {
-    throw new Error(`No such styling '${arg}' in given styles: ${Object.keys(styles).join(", ")}`)
-  }
-
-  listOfStyles.push(styles[arg])
-
-  for (const breakpointData of breakpointsReverse) {
-    const breakpointName = breakpointData[0]
-    const breakpointStyleNameUp = `${arg}${inflection.camelize(breakpointName)}Up`
-    const breakpointStyleNameDown = `${arg}${inflection.camelize(breakpointName)}Down`
-    const breakpointIsUp = digg(breakpoint, `${breakpointName}Up`)
-    const breakpointIsDown = digg(breakpoint, `${breakpointName}Down`)
-
-    if (breakpointStyleNameUp in styles && breakpointIsUp) {
-      listOfStyles.push(styles[breakpointStyleNameUp])
-    }
-
-    if (breakpointStyleNameDown in styles && breakpointIsDown) {
-      listOfStyles.push(styles[breakpointStyleNameDown])
-    }
-  }
-}
-
-const useStyles = (styles, args, dependencies = []) => {
-  const breakpoint = useBreakpoint()
-  const breakpointName = digg(breakpoint, "name")
-  const actualDependencies = [...dependencies, breakpointName]
-
-  const listOfStyles = useMemo(() => {
-    const listOfStyles = []
-    const breakpointsReverse = [...config.getBreakpoints()].reverse()
-
-    if (!Array.isArray(args)) {
-      args = [args]
-    }
-
-    for (const arg of args) {
-      if (typeof arg == "string") {
-        handleStringStyle(styles, listOfStyles, breakpoint, breakpointsReverse, arg)
-      } else if (typeof arg == "object") {
-        for (const key in arg) {
-          const value = arg[key]
-
-          if (value) {
-            handleStringStyle(styles, listOfStyles, breakpoint, breakpointsReverse, key)
-          }
-        }
-      } else {
-        throw new Error(`Unhandled type: ${typeof arg}`)
-      }
-    }
-
-    return listOfStyles
-  }, actualDependencies)
-
-  return listOfStyles
-}
-
-export default useStyles