@kaspernj/api-maker 1.0.2053 → 1.0.2054

package/src/use-updated-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 apiMakerUseUpdatedEvent = (model, onUpdated, props = {}) => {
-  const {active = true, debounce, onConnected, ...restProps} = props
-
-  if (Object.keys(restProps).length > 0) {
-    throw new Error(`Unknown props given to useUpdatedEvent: ${Object.keys(restProps).join(", ")}`)
-  }
-
-  const s = useShape({active, debounce, model, onUpdated})
-
-  const debounceCallback = useMemo(() => {
-    if (typeof debounce == "number") {
-      return debounceFunction(s.p.onUpdated, debounce)
-    } else {
-      return debounceFunction(s.p.onUpdated)
-    }
-  }, [debounce])
-
-  s.updateMeta({debounceCallback})
-
-  const onUpdatedCallback = useCallback((...args) => {
-    if (!s.p.active) {
-      return
-    }
-
-    if (s.p.debounce) {
-      s.m.debounceCallback(...args)
-    } else {
-      s.p.onUpdated(...args)
-    }
-  }, [])
-
-  useLayoutEffect(() => {
-    let connectUpdated, onConnectedListener
-
-    if (model) {
-      connectUpdated = ModelEvents.connectUpdated(model, onUpdatedCallback)
-
-      if (onConnected) {
-        onConnectedListener = connectUpdated.events.addListener("connected", onConnected)
-      }
-    }
-
-    return () => {
-      if (onConnectedListener) {
-        connectUpdated.events.removeListener("connected", onConnected)
-      }
-
-      if (connectUpdated) {
-        connectUpdated.unsubscribe()
-      }
-    }
-  }, [model?.id()])
-}
-
-export default apiMakerUseUpdatedEvent

package/src/use-validation-errors.js

@@ -1,33 +0,0 @@
-import events from "./events"
-import {useCallback} from "react"
-import useEventEmitter from "./use-event-emitter"
-import useShape from "set-state-compare/src/use-shape"
-
-const useValidationErrors = (callback) => {
-  const s = useShape({callback})
-
-  s.useStates({validationErrors: []})
-
-  const onValidationErrors = useCallback((validationErrors) => {
-    const matchedValidationErrors = []
-
-    for (const validationError of validationErrors.getValidationErrors()) {
-      if (s.p.callback(validationError)) {
-        validationError.setHandled()
-        matchedValidationErrors.push(validationError)
-      }
-    }
-
-    s.set({
-      validationErrors: matchedValidationErrors
-    })
-  }, [])
-
-  useEventEmitter(events, "onValidationErrors", onValidationErrors)
-
-  return {
-    validationErrors: s.s.validationErrors
-  }
-}
-
-export default useValidationErrors

package/src/utils/button.jsx

@@ -1,127 +0,0 @@
-import {Pressable, View} from "react-native"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
-import Icon from "./icon"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import React from "react"
-import Text from "./text"
-import {useForm} from "../form"
-
-export default memo(shapeComponent(class ApiMakerUtilsButton extends ShapeComponent {
-  static defaultProps = {
-    children: null,
-    danger: false,
-    disabled: false,
-    icon: null,
-    label: null,
-    onPress: null,
-    pressableProps: {},
-    submit: false,
-    textProps: {}
-  }
-
-  static propTypes = propTypesExact({
-    children: PropTypes.any,
-    danger: PropTypes.bool.isRequired,
-    disabled: PropTypes.bool.isRequired,
-    icon: PropTypes.string,
-    label: PropTypes.string,
-    onPress: PropTypes.func,
-    pressableProps: PropTypes.object.isRequired,
-    submit: PropTypes.bool.isRequired,
-    textProps: PropTypes.object.isRequired
-  })
-
-  setup() {
-    this.form = useForm()
-    this.useStates({hover: false})
-  }
-
-  render() {
-    const {children, danger, disabled, icon, label, pressableProps, textProps} = this.p
-    const {hover} = this.s
-    const {style, ...restPressableProps} = pressableProps
-    const {style: textStyle, ...restTextProps} = textProps
-
-    const pressableStyle = React.useMemo(() => {
-      let backgroundColor
-
-      if (danger) {
-        if (hover) {
-          backgroundColor = "#ff8a8a"
-        } else {
-          backgroundColor = "#ff6767"
-        }
-      } else {
-        if (hover) {
-          backgroundColor = "#e8e4ff"
-        } else {
-          backgroundColor = "#fff"
-        }
-      }
-
-      return Object.assign(
-        {
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          paddingHorizontal: 14,
-          paddingVertical: 8,
-          backgroundColor,
-          border: `1px solid ${danger ? "red" : "steelblue"}`,
-          borderRadius: 5
-        },
-        pressableProps?.style
-      )
-    }, [danger, hover, pressableProps?.style])
-
-    const actualTextStyle = React.useMemo(() => {
-      return Object.assign(
-        {
-          color: disabled ? "grey" : undefined
-        },
-        textStyle
-      )
-    }, [disabled])
-
-    return (
-      <Pressable
-        onPointerEnter={this.tt.onPointerEnter}
-        onPointerLeave={this.tt.onPointerLeave}
-        onPress={this.tt.onPress}
-        style={pressableStyle}
-        {...restPressableProps}
-      >
-        {icon &&
-          <View style={this.iconViewStyle ||= {marginRight: 4}}>
-            <Icon name={icon} />
-          </View>
-        }
-        {children}
-        {label &&
-          <Text style={actualTextStyle} {...restTextProps}>
-            {label}
-          </Text>
-        }
-      </Pressable>
-    )
-  }
-
-  onPointerEnter = () => this.setState({hover: true})
-  onPointerLeave = () => this.setState({hover: false})
-
-  onPress = () => {
-    if (this.p.disabled) {
-      return
-    }
-
-    if (this.p.onPress) {
-      this.p.onPress()
-    }
-
-    if (this.p.submit && this.tt.form) {
-      this.tt.form.submit()
-    }
-  }
-}))

package/src/utils/card.jsx

@@ -1,58 +0,0 @@
-import React, {useMemo} from "react"
-import classNames from "classnames"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
-import Text from "./text"
-import {View} from "react-native"
-
-export default memo(shapeComponent(class ApiMakerUtilsCard extends ShapeComponent {
-  static propTypes = propTypesExact({
-    children: PropTypes.any,
-    controls: PropTypes.any,
-    dataSet: PropTypes.object,
-    header: PropTypes.string,
-    style: PropTypes.object,
-    testID: PropTypes.string
-  })
-
-  render() {
-    const {children, controls, dataSet, header, style, testID} = this.props
-    const {component, ...restDataSet} = dataSet || {}
-
-    const actualDataSet = useMemo(() =>
-      Object.assign(
-        {component: classNames("api-maker/utils/card", component)},
-        restDataSet
-      )
-    , [component, restDataSet])
-
-    const actualStyle = useMemo(() =>
-      Object.assign(
-        {
-          backgroundColor: "#fff",
-          borderRadius: 15,
-          padding: 30
-        },
-        style
-      )
-    , [style])
-
-    return (
-      <View dataSet={actualDataSet} style={actualStyle} testID={testID}>
-        {controls &&
-          <View style={this.controlsViewStyle ||= {position: "absolute", top: 15, right: 15}}>
-            {controls}
-          </View>
-        }
-        {header &&
-          <Text style={this.headerTextStyle ||= {fontSize: 24}}>
-            {header}
-          </Text>
-        }
-        {children}
-      </View>
-    )
-  }
-}))

package/src/utils/checkbox.jsx

@@ -1,73 +0,0 @@
-import {CheckBox, Pressable, View} from "react-native"
-import React, {useMemo} from "react"
-import BaseComponent from "../base-component"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import Text from "./text"
-
-export default memo(shapeComponent(class ApiMakerUtilsCheckbox extends BaseComponent {
-  static defaultProps = {
-    dataSet: null,
-    label: undefined,
-    style: null
-  }
-
-  static propTypes = propTypesExact({
-    checked: PropTypes.bool,
-    dataSet: PropTypes.object,
-    defaultChecked: PropTypes.bool,
-    label: PropTypes.string,
-    onCheckedChange: PropTypes.func,
-    style: PropTypes.object
-  })
-
-  setup() {
-    this.useStates({
-      checked: this.props.defaultChecked
-    })
-    this.isChecked = this.calculateChecked()
-  }
-
-  calculateChecked() {
-    if ("checked" in this.props) {
-      return this.p.checked
-    } else {
-      return this.s.checked
-    }
-  }
-
-  render() {
-    const {isChecked} = this.tt
-    const {dataSet, label, style} = this.p
-    const actualStyle = useMemo(() => Object.assign({flexDirection: "row", alignItems: "center"}, style), [style])
-    const actualDataSet = useMemo(() => Object.assign({checked: isChecked}, dataSet), [dataSet, isChecked])
-
-    return (
-      <View
-        dataSet={this.viewContainerDataSet ||= {component: "api-maker/utils/checkbox"}}
-        style={actualStyle}
-      >
-        <CheckBox dataSet={actualDataSet} onValueChange={this.tt.onValueChange} value={isChecked} />
-        {label &&
-          <Pressable onPress={this.tt.onLabelPressed}>
-            <Text style={this.textStyle ||= {marginLeft: 3}}>
-              {label}
-            </Text>
-          </Pressable>
-        }
-      </View>
-    )
-  }
-
-  onLabelPressed = () => this.p.onCheckedChange(!this.tt.isChecked)
-
-  onValueChange = (e) => {
-    if (this.props.onCheckedChange) {
-      this.p.onCheckedChange(e)
-    }
-
-    this.setState({checked: !this.tt.isChecked})
-  }
-}))

package/src/utils/checkboxes.jsx

@@ -1,157 +0,0 @@
-import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
-import React, {useMemo} from "react"
-import Checkbox from "./checkbox"
-import {digs} from "diggerize"
-import {useForm} from "../form"
-import * as inflection from "inflection"
-import InvalidFeedback from "./invalid-feedback"
-import memo from "set-state-compare/src/memo"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import Text from "./text"
-import useInput from "../use-input"
-import {View} from "react-native"
-
-const OptionElement = memo(shapeComponent(class OptionElement extends ShapeComponent {
-  static propTypes = propTypesExact({
-    checked: PropTypes.bool.isRequired,
-    inputName: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    option: PropTypes.array.isRequired
-  })
-
-  render() {
-    const {checked, inputName, option} = this.p
-    const dataSet = useMemo(() => ({
-      component: "api-maker/utils/checkboxes/option",
-      name: inputName,
-      value: option[1]
-    }), [inputName, option[1]])
-
-    return (
-      <View >
-        <Checkbox
-          checked={checked}
-          dataSet={dataSet}
-          label={option[0]}
-          onCheckedChange={this.tt.onChange}
-        />
-      </View>
-    )
-  }
-
-  onChange = (checked) => this.p.onChange({checked, option: this.p.option})
-}))
-
-export default memo(shapeComponent(class ApiMakerUtilsCheckboxes extends ShapeComponent {
-  static propTypes = propTypesExact({
-    attribute: PropTypes.string,
-    defaultValue: PropTypes.array,
-    label: PropTypes.string,
-    labelClassName: PropTypes.string,
-    model: PropTypes.object,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    options: PropTypes.array.isRequired
-  })
-
-  setup() {
-    const {inputProps, wrapperOpts} = useInput({props: this.props})
-
-    this.generatedId = useMemo(
-      () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
-      []
-    )
-
-    this.setInstance({
-      form: useForm(),
-      inputProps,
-      wrapperOpts
-    })
-    this.useStates({
-      checkedOptions: () => {
-        if (Array.isArray(this.props.defaultValue)) return this.props.defaultValue
-        if (this.props.defaultValue) return [this.props.defaultValue]
-
-        return []
-      }
-    })
-
-    useMemo(() => {
-      if (this.form && inputProps.name) {
-        this.form.setValue(inputProps.name, this.s.checkedOptions)
-      }
-    }, [])
-  }
-
-  render () {
-    const {wrapperOpts} = this.tt
-    const {errors} = digs(wrapperOpts, "errors")
-
-    return (
-      <View dataSet={this.rootViewDataSet ||= {component: "api-maker/utils/checkboxes"}}>
-        <Text style={this.textStyle ||= {fontWeight: "bold"}}>
-          {this.tt.wrapperOpts.label}
-        </Text>
-        {this.props.options.map((option) =>
-          <OptionElement
-            checked={this.isChecked(option)}
-            inputName={this.inputName()}
-            key={option[1]}
-            onChange={this.tt.onOptionChecked}
-            option={option}
-          />
-        )}
-        {errors.length > 0 &&
-          <InvalidFeedback errors={errors} />
-        }
-      </View>
-    )
-  }
-
-  inputDefaultValue () {
-    const {attribute, defaultValue, model} = this.props
-
-    if (defaultValue) {
-      return defaultValue
-    } else if (attribute && model) {
-      if (!model[attribute]) throw `No such attribute: ${attribute}`
-
-      return this.props.model[attribute]()
-    }
-  }
-
-  inputName () {
-    if (this.props.name) {
-      return `${this.props.name}[]`
-    } else if (this.props.model) {
-      return `${this.props.model.modelClassData().paramKey}[${inflection.underscore(this.props.attribute)}]`
-    }
-  }
-
-  isChecked = (option) => this.s.checkedOptions.includes(option[1])
-
-  onOptionChecked = ({checked, option}) => {
-    const {inputProps, form} = this.tt
-    const {name} = inputProps
-    let newOptions
-
-    if (checked) {
-      newOptions = this.s.checkedOptions.concat([option[1]])
-
-      this.setState({checkedOptions: newOptions})
-    } else {
-      newOptions = this.s.checkedOptions.filter((value) => value != option[1])
-
-      this.setState({checkedOptions: newOptions})
-    }
-
-    if (this.props.onChange) {
-      this.p.onChange({checked, option})
-    }
-
-    if (form && name) {
-      form.setValue(name, newOptions)
-    }
-  }
-}))

package/src/utils/default-style.jsx

@@ -1,80 +0,0 @@
-import React, {createContext, useContext, useMemo} from "react"
-import {incorporate} from "incorporator"
-import memo from "set-state-compare/src/memo"
-
-const DefaultStyleContext = createContext({
-  Text: []
-})
-
-const useDefaultStyle = () => {
-  const defaultStyle = useContext(DefaultStyleContext)
-
-  return defaultStyle
-}
-
-const useMergedStyle = (style, elementType) => {
-  const defaultStyle = useDefaultStyle()
-
-  const stylesList = useMemo(() => {
-    const defaultElementStyle = defaultStyle[elementType]
-    let stylesList
-
-    if (Array.isArray(defaultElementStyle)) {
-      stylesList = [...defaultElementStyle]
-    } else if (typeof defaultElementStyle == "object") {
-      stylesList = [defaultElementStyle]
-    } else {
-      throw new Error(`Unknown type for default element type: ${typeof defaultElementStyle}`)
-    }
-
-    if (style && Array.isArray(style)) {
-      for (const styleI of style) {
-        stylesList.push(styleI)
-      }
-    } else if (style) {
-      stylesList.push(style)
-    }
-
-    return stylesList
-  }, [defaultStyle[elementType], style])
-
-  const actualNewDefaultStyle = useMemo(() => {
-    const actualNewDefaultStyle = {...defaultStyle}
-
-    actualNewDefaultStyle[elementType] = stylesList
-
-    return actualNewDefaultStyle
-  }, [defaultStyle, stylesList])
-
-  return {newDefaultStyle: actualNewDefaultStyle, stylesList}
-}
-
-const WithDefaultStyle = memo(({children, style, ...restProps}) => {
-  if (Object.keys(restProps).length > 0) {
-    throw new Error(`Unhandled props: ${Object.keys(restProps).join(", ")}`)
-  }
-
-  const defaultStyle = useContext(DefaultStyleContext)
-
-  const newDefaultStyle = useMemo(() => {
-    for (const key in style) {
-      if (!(key in defaultStyle)) {
-        throw new Error(`Invalid element type given: ${key}`)
-      }
-    }
-
-    const newDefaultStyle = {}
-
-    incorporate(newDefaultStyle, defaultStyle, style)
-
-    return newDefaultStyle
-  }, [defaultStyle, style])
-
-  return (
-    <DefaultStyleContext.Provider value={newDefaultStyle}>
-      {children}
-    </DefaultStyleContext.Provider>
-  )
-})
-
-export {useDefaultStyle, useMergedStyle, WithDefaultStyle}

package/src/utils/header.jsx

@@ -1,14 +0,0 @@
-import Text from "./text"
-import React from "react"
-
-export default React.memo(function ApiMakerUtilsHeader(props) {
-  const {style, ...restProps} = props
-
-  const actualStyle = React.useMemo(() => {
-    return Object.assign({marginBottom: 5, fontSize: 18, fontWeight: "bold"}, style)
-  }, [style])
-
-  return (
-    <Text style={actualStyle} {...restProps} />
-  )
-})

package/src/utils/icon.jsx

@@ -1,81 +0,0 @@
-import BaseComponent from "../base-component"
-import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
-import FontAwesome5Icon from "react-native-vector-icons/FontAwesome5"
-import FontAwesome6Icon from "react-native-vector-icons/FontAwesome6"
-import MaterialIconsIcon from "react-native-vector-icons/MaterialIcons"
-import memo from "set-state-compare/src/memo"
-import React, {useMemo} from "react"
-import {shapeComponent} from "set-state-compare/src/shape-component"
-import {useMergedStyle} from "./default-style"
-
-const FontAwesomeGlyphMap = FontAwesomeIcon.getRawGlyphMap()
-const FontAwesome5GlyphMap = FontAwesome5Icon.getRawGlyphMap()
-const FontAwesome6GlyphMap = FontAwesome6Icon.getRawGlyphMap()
-const MaterialIconsGlyphMap = MaterialIconsIcon.getRawGlyphMap()
-
-const iconMap = {
-  pencil: "FontAwesome",
-  remove: "FontAwesome",
-  search: "FontAwesome"
-}
-
-export default memo(shapeComponent(class ApiMakerUtilsIcon extends BaseComponent {
-  render() {
-    const {dataSet, name, style, version, ...restProps} = this.props
-    const {stylesList} = useMergedStyle(style, "Text")
-    let actualVersion = version
-
-    if (!actualVersion) {
-      if (name in iconMap) {
-        actualVersion = iconMap[name]
-      } else if (name in FontAwesome6GlyphMap) {
-        actualVersion = "FontAwesome6"
-      } else if (name in FontAwesome5GlyphMap) {
-        actualVersion = "FontAwesome5"
-      } else if (name in FontAwesomeGlyphMap) {
-        actualVersion = "FontAwesome"
-      } else if (name in MaterialIconsGlyphMap) {
-        actualVersion =  "MaterialIcons"
-      } else {
-        actualVersion = "FontAwesome"
-      }
-    }
-
-    // Only forward some styles like color
-    const actualStylesList = useMemo(() => {
-      const actualStylesList = []
-
-      for (const style of stylesList) {
-        const newStyle = {}
-        let count = 0
-
-        for (const key in style) {
-          if (key == "color") {
-            newStyle[key] = style[key]
-            count++
-          }
-        }
-
-        if (count > 0) {
-          actualStylesList.push(newStyle)
-        }
-      }
-
-      return actualStylesList
-    }, [stylesList, style])
-
-    const actualDataSet = useMemo(() => Object.assign({name, version: actualVersion}, dataSet), [actualVersion, dataSet, name])
-
-    if (actualVersion == "FontAwesome") {
-      return <FontAwesomeIcon dataSet={actualDataSet} name={name} style={actualStylesList} {...restProps} />
-    } else if (actualVersion == "FontAwesome5") {
-      return <FontAwesome5Icon dataSet={actualDataSet} name={name} style={actualStylesList} {...restProps} />
-    } else if (actualVersion == "FontAwesome6") {
-      return <FontAwesome6Icon dataSet={actualDataSet} name={name} style={actualStylesList} {...restProps} />
-    } else if (actualVersion == "MaterialIcons") {
-      return <MaterialIconsIcon dataSet={actualDataSet} name={name} style={actualStylesList} {...restProps} />
-    } else {
-      throw new Error(`Unknown version: ${actualVersion}`)
-    }
-  }
-}))