@kaspernj/api-maker 1.0.2011 → 1.0.2012

package/src/utils/checkboxes.jsx

@@ -0,0 +1,158 @@
+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
+
+    return (
+      <View >
+        <Checkbox
+          checked={checked}
+          dataSet={{
+            component: "api-maker/utils/checkboxes/option",
+            name: inputName,
+            value: option[1]
+          }}
+          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={{component: "api-maker/utils/checkboxes"}}>
+        <Text style={{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})
+    }
+
+    console.log({checkedOptions: this.s.checkedOptions})
+
+    if (this.props.onChange) {
+      this.p.onChange({checked, option})
+    }
+
+    if (form && name) {
+      form.setValue(name, newOptions)
+    }
+  }
+}))

package/src/utils/default-style.jsx

@@ -0,0 +1,25 @@
+import React, {createContext, useContext} from "react"
+import memo from "set-state-compare/src/memo"
+
+const DefaultStyleContext = createContext({
+  Text: {}
+})
+
+const useDefaultStyle = () => {
+  const defaultStyle = useContext(DefaultStyleContext)
+
+  return defaultStyle
+}
+
+const WithDefaultStyle = memo((props) => {
+  const defaultStyle = useContext(DefaultStyleContext)
+  const newDefaultStyle = Object.assign({}, defaultStyle, props.style)
+
+  return (
+    <DefaultStyleContext.Provider value={newDefaultStyle}>
+      {props.children}
+    </DefaultStyleContext.Provider>
+  )
+})
+
+export {useDefaultStyle, WithDefaultStyle}

package/src/utils/icon.jsx

@@ -0,0 +1,21 @@
+import BaseComponent from "../base-component"
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import {useDefaultStyle} from "./default-style"
+
+export default memo(shapeComponent(class ApiMakerUtilsIcon extends BaseComponent {
+  render() {
+    const defaultStyle = useDefaultStyle()
+    const {style, ...restProps} = this.props
+    const actualStyle = Object.assign(
+      {color: defaultStyle.Text.color},
+      style
+    )
+
+    return (
+      <FontAwesomeIcon style={actualStyle} {...restProps} />
+    )
+  }
+}))

package/src/utils/invalid-feedback.jsx

@@ -0,0 +1,20 @@
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+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"
+
+export default memo(shapeComponent(class ApiMakerUtilsInvalidFeedback extends ShapeComponent {
+  static propTypes = propTypesExact({
+    message: PropTypes.string.isRequired
+  })
+
+  render() {
+    return (
+      <Text style={{color: "red"}}>
+        {this.p.message}
+      </Text>
+    )
+  }
+}))

package/src/utils/modal.jsx

@@ -0,0 +1,60 @@
+import {Modal, Pressable, View} from "react-native"
+import BaseComponent from "../base-component"
+import Card from "./card"
+import Icon from "../utils/icon"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component"
+import useBreakpoint from "../use-breakpoint"
+
+export default memo(shapeComponent(class ApiMakerUtilsComponent extends BaseComponent {
+  render() {
+    const {xs, sm} = useBreakpoint()
+    const {children, dataSet, ...restProps} = this.props
+    const actualDataSet = Object.assign(
+      {
+        component: "api-maker/utils/modal"
+      },
+      dataSet
+    )
+    let width, maxWidth
+
+    if (xs || sm) {
+      width = "95%"
+    } else {
+      width = "80%"
+      maxWidth = 800
+    }
+
+    return (
+      <Modal dataSet={actualDataSet} {...restProps}>
+        <View
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            height: "100%",
+            backgroundColor: "rgba(0, 0, 0, 0.8)"
+          }}
+        >
+          <Card
+            controls={this.cardHeaderControls()}
+            style={{width, maxWidth}}
+          >
+            {children}
+          </Card>
+        </View>
+      </Modal>
+    )
+  }
+
+  cardHeaderControls() {
+    return (
+      <Pressable onPress={this.tt.onModalClosePress} style={{marginLeft: "auto", padding: 5}}>
+        <Icon name="remove" />
+      </Pressable>
+    )
+  }
+
+  onModalClosePress = () => this.props.onRequestClose && this.props.onRequestClose()
+}))

package/src/utils/text.jsx

@@ -0,0 +1,16 @@
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import {Text} from "react-native"
+import {useDefaultStyle, WithDefaultStyle} from "./default-style"
+
+export default memo((props) => {
+  const {style, ...restProps} = props
+  const defaultStyle = useDefaultStyle()
+  const actualStyle = Object.assign({}, defaultStyle?.Text, style)
+
+  return (
+    <WithDefaultStyle style={actualStyle}>
+      <Text style={actualStyle} {...restProps} />
+    </WithDefaultStyle>
+  )
+})

package/src/{validation-error.mjs → validation-error.js}

@@ -1,8 +1,8 @@
-import BaseError from "./base-error.mjs"
-import inflection from "inflection"
+import BaseError from "./base-error"
+import * as inflection from "inflection"
 
 class ValidationError extends BaseError {
-  constructor (validationErrors, args) {
+  constructor(validationErrors, args) {
     const errorMessage = validationErrors.getUnhandledErrorMessage() || validationErrors.getErrorMessage()
     const forwardedArgs = {addResponseErrorsToErrorMessage: false}
     const newArgs = Object.assign({}, args, forwardedArgs)
@@ -11,12 +11,16 @@ class ValidationError extends BaseError {
     this.validationErrors = validationErrors
   }
 
-  hasUnhandledErrors () {
+  getUnhandledErrors = () => this.validationErrors.getValidationErrors().filter((validationError) => !validationError.getHandled())
+  getValidationErrors = () => digg(this, "validationErrors")
+
+  hasUnhandledErrors() {
     const unhandledError = this.validationErrors.getValidationErrors().find((validationError) => !validationError.getHandled())
+
     return Boolean(unhandledError)
   }
 
-  hasValidationErrorForAttribute (attributeName) {
+  hasValidationErrorForAttribute(attributeName) {
     const underscoredAttributeName = inflection.underscore(attributeName)
     const foundAttribute = this.validationErrors.getValidationErrors().find((validationError) => validationError.getAttributeName() == underscoredAttributeName)
 

package/src/{validation-errors.mjs → validation-errors.js}

@@ -1,9 +1,9 @@
 import {digg, digs} from "diggerize"
-import inflection from "inflection"
-import modelClassRequire from "./model-class-require.mjs"
+import * as inflection from "inflection"
+import modelClassRequire from "./model-class-require"
 
 class ValidationError {
-  constructor (args) {
+  constructor(args) {
     this.attributeName = digg(args, "attribute_name")
     this.attributeType = digg(args, "attribute_type")
     this.errorMessages = digg(args, "error_messages")
@@ -13,7 +13,7 @@ class ValidationError {
     this.modelName = digg(args, "model_name")
   }
 
-  matchesAttributeAndInputName (attributeName, inputName) {
+  matchesAttributeAndInputName(attributeName, inputName) {
     if (this.getInputName() == inputName) return true
     if (!attributeName) return false
 
@@ -30,15 +30,10 @@ class ValidationError {
     return false
   }
 
-  getAttributeName () {
-    return digg(this, "attributeName")
-  }
-
-  getErrorMessages () {
-    return digg(this, "errorMessages")
-  }
+  getAttributeName = () => digg(this, "attributeName")
+  getErrorMessages = () => digg(this, "errorMessages")
 
-  getFullErrorMessages () {
+  getFullErrorMessages() {
     const {attributeType} = digs(this, "attributeType")
 
     if (attributeType == "base") {
@@ -55,32 +50,27 @@ class ValidationError {
     }
   }
 
-  getHandled () {
-    return digg(this, "handled")
-  }
+  getHandled = () => digg(this, "handled")
+  getInputName = () => digg(this, "inputName")
 
-  getInputName () {
-    return digg(this, "inputName")
-  }
-
-  getModelClass () {
+  getModelClass() {
     const modelName = inflection.classify(digg(this, "modelName"))
 
     return modelClassRequire(modelName)
   }
 
-  setHandled () {
+  setHandled() {
     this.handled = true
   }
 }
 
 class ValidationErrors {
-  constructor (args) {
+  constructor(args) {
     this.rootModel = digg(args, "model")
     this.validationErrors = digg(args, "validationErrors").map((validationError) => new ValidationError(validationError))
   }
 
-  getErrorMessage () {
+  getErrorMessage() {
     const fullErrorMessages = []
 
     for (const validationError of this.validationErrors) {
@@ -92,16 +82,14 @@ class ValidationErrors {
     return fullErrorMessages.join(". ")
   }
 
-  getValidationErrors () {
-    return this.validationErrors
-  }
+  getValidationErrors = () => this.validationErrors
 
   getValidationErrorsForInput ({attribute, inputName, onMatchValidationError}) {
     const validationErrors = this.validationErrors.filter((validationError) => {
       if (onMatchValidationError) {
         return onMatchValidationError(validationError)
       } else {
-        return validationError.matchesAttributeAndInputName(attribute, inputName, onMatchValidationError)
+        return validationError.matchesAttributeAndInputName(attribute, inputName)
       }
     })
 

package/src/with-api-maker.jsx

@@ -0,0 +1,31 @@
+import React, {createContext, useContext, useMemo} from "react"
+import ApiMakerConfig from "./config"
+import memo from "set-state-compare/src/memo"
+
+const ApiMakerContext = createContext()
+const useApiMaker = () => {
+  const apiMakerContext = useContext(ApiMakerContext)
+
+  if (apiMakerContext) {
+    return apiMakerContext
+  }
+
+  return {
+    config: ApiMakerConfig
+  }
+}
+
+const WithApiMaker = memo(({children, config, ...restProps}) => {
+  const restPropsKeys = Object.keys(restProps)
+  const value = useMemo(() => ({config}), [config])
+
+  if (restPropsKeys.length > 0) throw new Error(`Unhandled props: ${restPropsKeys.join(", ")}`)
+
+  return (
+    <ApiMakerContext.Provider value={value}>
+      {children}
+    </ApiMakerContext.Provider>
+  )
+})
+
+export {useApiMaker, WithApiMaker}

package/src/with-collection.jsx

@@ -0,0 +1,17 @@
+import {digg} from "diggerize"
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import useCollection from "./use-collection"
+
+export default (WrappedComponent, withCollectionArgs) => memo(() => {
+  const useCollectionResult = useCollection(withCollectionArgs)
+  const models = digg(useCollectionResult, "models")
+  const modelsArgName = inflection.camelize(digg(withCollectionArgs.modelClass.modelClassData(), "pluralName"), true)
+  const forwardArgs = {}
+
+  forwardArgs[modelsArgName] = models
+
+  return (
+    <WrappedComponent {...forwardArgs} {...this.props} />
+  )
+})

package/src/with-current-user.jsx

@@ -1,28 +1,10 @@
-import {digs} from "diggerize"
-import EventEmitterListener from "./event-emitter-listener"
-import PureComponent from "set-state-compare/src/pure-component"
+import React from "react"
+import useCurrentUser from "./use-current-user"
 
-export default (WrappedComponent) => class WithCurrentUser extends PureComponent {
-  state = {
-    currentUser: Devise.currentUser()
-  }
+export default (WrappedComponent) => (props) => {
+  const currentUser = useCurrentUser()
 
-  render() {
-    const {onDeviseSigned} = digs(this, "onDeviseSigned")
-    const {currentUser} = digs(this.state, "currentUser")
-
-    return (
-      <>
-        <EventEmitterListener events={Devise.events()} event="onDeviseSignIn" onCalled={onDeviseSigned} />
-        <EventEmitterListener events={Devise.events()} event="onDeviseSignOut" onCalled={onDeviseSigned} />
-        <WrappedComponent {...this.props} currentUser={currentUser} />
-      </>
-    )
-  }
-
-  onDeviseSigned = () => {
-    const currentUser = Devise.currentUser()
-
-    if (this.state.currentUser !== currentUser) this.setState({currentUser})
-  }
+  return (
+    <WrappedComponent {...props} currentUser={currentUser} />
+  )
 }

package/src/with-model.jsx

@@ -0,0 +1,16 @@
+import memo from "set-state-compare/src/memo"
+import React from "react"
+import useModel from "./use-model"
+
+export default (WrappedComponent, modelClass, givenArgs) => {
+  const ApiMakerWithModel = (props) => {
+    const args = Object.assign({match: props.match}, givenArgs)
+    const useModelResult = useModel(modelClass, args)
+
+    return (
+      <WrappedComponent {...useModelResult} {...props} />
+    )
+  }
+
+  return memo(ApiMakerWithModel)
+}

package/src/with-router.jsx

@@ -1,133 +1,11 @@
-import config from "./config.mjs"
-import escapeStringRegexp from "escape-string-regexp"
-import inflection from "inflection"
-import PropTypes from "prop-types"
 import React from "react"
-import shouldComponentUpdate from "set-state-compare/src/should-component-update"
+import useRouter from "./use-router"
 
-export default (WrapperComponent) => class WithRouter extends React.Component {
-  static propTypes = {
-    path: PropTypes.string,
-    routeDefinitions: PropTypes.object,
-    routes: PropTypes.object
-  }
+export default (WrapperComponent) => (props) => {
+  const {path, routes, routeDefinitions, ...restProps} = props
+  const {match} = useRouter({path, routes, routeDefinitions})
 
-  parsedRouteDefinitions = this.parseRouteDefinitions()
-
-  shouldComponentUpdate(nextProps, nextState) {
-    return shouldComponentUpdate(this, nextProps, nextState)
-  }
-
-  findRouteParams(routeDefinition) {
-    const result = []
-    const parts = routeDefinition.path.split("/")
-
-    for (const part of parts) {
-      if (part.match(/^:([a-z_]+)$/))
-        result.push(part)
-    }
-
-    return result
-  }
-
-  path() {
-    let path = this.props.path || window.location.pathname
-
-    path = path.replace(/[/]+$/, "")
-
-    return path
-  }
-
-  routeDefinitions() {
-    return this.props.routeDefinitions || config.getRouteDefinitions()
-  }
-
-  routes() {
-    return this.props.routes || config.getRoutes()
-  }
-
-  parseRouteDefinitions() {
-    const Locales = require("shared/locales").default
-    const routeDefinitions = this.routeDefinitions()
-    const routes = this.routes()
-    const regex = /:([A-z\d_]+)/
-    const parsedRouteDefinitions = []
-
-    for (const locale of Locales.availableLocales()) {
-      for (const routeDefinition of routeDefinitions.routes) {
-        const routePathName = `${inflection.camelize(routeDefinition.name, true)}Path`
-        const params = this.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
-  }
-
-  findMatchingRoute() {
-    const path = this.path()
-
-    for (const parsedRouteDefinition of this.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}
-      }
-    }
-  }
-
-  render() {
-    const {path, routes, routeDefinitions, ...restProps} = this.props
-    const matchingRoute = this.findMatchingRoute()
-    const params = matchingRoute?.params || {}
-    const match = {
-      matchingRoute,
-      params
-    }
-
-    return (
-      <WrapperComponent match={match} {...restProps} />
-    )
-  }
+  return (
+    <WrapperComponent match={match} {...restProps} />
+  )
 }