@kaspernj/api-maker 1.0.214 → 1.0.217

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.214",
+  "version": "1.0.217",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -49,6 +49,7 @@
     "js-money": ">= 0.6.3",
     "numberable": ">= 1.0.0",
     "object-to-formdata": ">= 4.1.0",
+    "on-location-changed": ">= 1.0.7",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
     "strftime": ">= 0.10.0",
@@ -67,13 +68,13 @@
     "@babel/eslint-parser": "^7.16.3",
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
-    "babel-jest": "^28.0.3",
+    "babel-jest": "^29.0.1",
     "eslint": "^8.2.0",
     "eslint-find-rules": "^4.0.0",
-    "eslint-plugin-jest": "^26.0.0",
+    "eslint-plugin-jest": "^27.0.1",
     "eslint-plugin-react": "^7.23.2",
     "i18n-on-steroids": "^1.0.2",
-    "jest": "^28.0.3",
+    "jest": "^29.0.1",
     "jsdom": "^20.0.0"
   }
 }

package/src/base-model.mjs

@@ -1,7 +1,7 @@
 import AttributeNotLoadedError from "./attribute-not-loaded-error.mjs"
 import Collection from "./collection.mjs"
 import CommandsPool from "./commands-pool.mjs"
-import Config from "@kaspernj/api-maker/src/config.mjs"
+import Config from "./config.mjs"
 import CustomError from "./custom-error.mjs"
 import {digg} from "diggerize"
 import FormDataObjectizer from "form-data-objectizer"

package/src/bootstrap/attribute-row/basic-style.scss

@@ -0,0 +1,9 @@
+.component-api-maker-attribute-row {
+  .attribute-row-label {
+    font-weight: bold;
+  }
+
+  + .component-api-maker-attribute-row {
+    margin-top: 12px;
+  }
+}

package/src/bootstrap/attribute-row/index.jsx

@@ -0,0 +1,84 @@
+import classNames from "classnames"
+import {digg} from "diggerize"
+import MoneyFormatter from "../../money-formatter"
+import PropTypes from "prop-types"
+import React from "react"
+import strftime from "strftime"
+
+export default class ApiMakerBootstrapAttributeRow extends React.PureComponent {
+  static defaultProps = {
+    checkIfAttributeLoaded: false
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    checkIfAttributeLoaded: PropTypes.bool.isRequired,
+    children: PropTypes.node,
+    identifier: PropTypes.string,
+    label: PropTypes.node,
+    model: PropTypes.object,
+    value: PropTypes.node
+  }
+
+  render () {
+    const {attribute, checkIfAttributeLoaded, children, className, identifier, label, model, value, ...restProps} = this.props
+
+    return (
+      <div
+        className={classNames(className, "component-api-maker-attribute-row")}
+        data-attribute={attribute}
+        data-identifier={identifier}
+        {...restProps}
+      >
+        <div className="attribute-row-label">
+          {this.label()}
+        </div>
+        <div className="attribute-row-value">
+          {this.value()}
+        </div>
+      </div>
+    )
+  }
+
+  label() {
+    const {attribute, label, model} = this.props
+
+    if ("label" in this.props) return label
+    if (attribute && model) return model.constructor.humanAttributeName(attribute)
+
+    throw new Error("Couldn't figure out label")
+  }
+
+  value() {
+    const {attribute, checkIfAttributeLoaded, children, model} = this.props
+
+    if (children) return children
+
+    if (attribute && !(attribute in model))
+      throw new Error(`Attribute not found: ${digg(model.modelClassData(), "name")}#${attribute}`)
+
+    if (attribute && checkIfAttributeLoaded && !model.isAttributeLoaded(attribute))
+      return null
+
+    if (attribute && model) {
+      const value = model[attribute]()
+
+      return this.valueContent(value)
+    }
+  }
+
+  valueContent(value) {
+    if (value instanceof Date) {
+      return strftime("%Y-%m-%d %H:%M", value)
+    } else if (typeof value === "boolean") {
+      if (value)
+        return I18n.t("js.shared.yes")
+
+      return I18n.t("js.shared.no")
+    } else if (MoneyFormatter.isMoney(value)) {
+      return MoneyFormatter.format(value)
+    } else {
+      return value
+    }
+  }
+}

package/src/bootstrap/attribute-rows.jsx

@@ -0,0 +1,27 @@
+import AttributeRow from "./attribute-row"
+import {digs} from "diggerize"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+
+export default class ApiMakerBootstrapAttributeRows extends React.PureComponent {
+  static defaultProps = {
+    checkIfAttributeLoaded: false
+  }
+
+  static propTypes = propTypesExact({
+    attributes: PropTypes.array.isRequired,
+    checkIfAttributeLoaded: PropTypes.bool.isRequired,
+    model: PropTypes.object.isRequired
+  })
+
+  classObject = this.props.model.modelClass()
+
+  render () {
+    const {attributes, checkIfAttributeLoaded, model} = digs(this.props, "attributes", "checkIfAttributeLoaded", "model")
+
+    return attributes.map((attribute) =>
+      <AttributeRow attribute={attribute} checkIfAttributeLoaded={checkIfAttributeLoaded} key={`attribute-${attribute}`} model={model} />
+    )
+  }
+}

package/src/bootstrap/card.jsx

@@ -0,0 +1,135 @@
+import {digs} from "diggerize"
+import PropTypes from "prop-types"
+import React from "react"
+
+export default class ApiMakerBootstrapCard extends React.PureComponent {
+  static defaultProps = {
+    defaultExpanded: true,
+    expandable: false,
+    expandableHide: false,
+    responsiveTable: true,
+    table: false
+  }
+
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.node,
+    controls: PropTypes.node,
+    defaultExpanded: PropTypes.bool.isRequired,
+    expandable: PropTypes.bool.isRequired,
+    expandableHide: PropTypes.bool.isRequired,
+    header: PropTypes.node,
+    striped: PropTypes.bool,
+    responsiveTable: PropTypes.bool.isRequired,
+    table: PropTypes.bool.isRequired
+  }
+
+  constructor (props) {
+    super(props)
+    this.state = {
+      expanded: props.defaultExpanded
+    }
+  }
+
+  render () {
+    const {
+      children,
+      className,
+      controls,
+      defaultExpanded,
+      expandable,
+      expandableHide,
+      header,
+      responsiveTable,
+      striped,
+      table,
+      ...restProps
+    } = this.props
+    const {expanded} = digs(this.state, "expanded")
+
+    return (
+      <div className={this.classNames()} ref="card" {...restProps}>
+        {(controls || expandable || header) &&
+          <div className={`card-header d-flex ${!expanded && "border-bottom-0"}`}>
+            <div style={{alignSelf: "center", marginRight: "auto"}}>
+              {header}
+            </div>
+            {(controls || expandable) &&
+              <div style={{alignSelf: "center"}}>
+                {controls}
+                {expandable && expanded &&
+                  <a className="collapse-card-button text-muted" href="#" onClick={this.onCollapseClicked}>
+                    <i className="la la-angle-up" />
+                  </a>
+                }
+                {expandable && !expanded &&
+                  <a className="expand-card-button text-muted" href="#" onClick={this.onExpandClicked}>
+                    <i className="la la-angle-down" />
+                  </a>
+                }
+              </div>
+            }
+          </div>
+        }
+        {(expanded || expandableHide) &&
+          <div className={this.bodyClassNames()}>
+            {table &&
+              <table className={this.tableClassNames()}>
+                {children}
+              </table>
+            }
+            {!table && children}
+          </div>
+        }
+      </div>
+    )
+  }
+
+  classNames () {
+    const classNames = ["component-bootstrap-card", "card", "card-default"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    return classNames.join(" ")
+  }
+
+  bodyClassNames () {
+    const {expandableHide, responsiveTable, table} = digs(this.props, "expandableHide", "responsiveTable", "table")
+    const {expanded} = digs(this.state, "expanded")
+    const classNames = ["card-body"]
+
+    if (!expanded && expandableHide) {
+      classNames.push("d-none")
+    }
+
+    if (table) {
+      if (responsiveTable){
+        classNames.push("table-responsive")
+      }
+
+      classNames.push("p-0")
+    }
+
+    return classNames.join(" ")
+  }
+
+  onCollapseClicked = (e) => {
+    e.preventDefault()
+    this.setState({expanded: false})
+  }
+
+  onExpandClicked = (e) => {
+    e.preventDefault()
+    this.setState({expanded: true})
+  }
+
+  tableClassNames () {
+    const classNames = ["table", "table-hover", "mb-0", "w-100"]
+
+    if (this.props.striped)
+      classNames.push("table-striped")
+
+    return classNames.join(" ")
+  }
+}

package/src/bootstrap/checkbox.jsx

@@ -0,0 +1,79 @@
+import {Checkbox} from "../inputs/checkbox"
+import classNames from "classnames"
+import {digs} from "diggerize"
+import inputWrapper from "../inputs/input-wrapper"
+import InvalidFeedback from "./invalid-feedback"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ApiMakerBootstrapCheckbox extends React.PureComponent {
+  static defaultProps = {
+    defaultValue: 1,
+    zeroInput: true
+  }
+
+  static propTypes = {
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    defaultChecked: PropTypes.bool,
+    defaultValue: PropTypes.node,
+    hint: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    wrapperClassName: PropTypes.string,
+    zeroInput: PropTypes.bool
+  }
+
+  render () {
+    const {className, hint, id, inputProps, inputRef, label, labelClassName, wrapperClassName, wrapperOpts, ...restProps} = this.props
+    const {errors} = digs(wrapperOpts, "errors")
+
+    return (
+      <div className={this.wrapperClassName()}>
+        <div className="form-check">
+          <Checkbox
+            className={classNames("form-check-input", className, {"is-invalid": errors.length > 0})}
+            inputProps={inputProps}
+            wrapperOpts={wrapperOpts}
+            {...restProps}
+          />
+          {wrapperOpts.label &&
+            <label className={this.labelClassName()} htmlFor={inputProps.id}>
+              {wrapperOpts.label}
+            </label>
+          }
+          {hint &&
+            <p className="text-muted">
+              {hint}
+            </p>
+          }
+          {errors.length > 0 && <InvalidFeedback errors={errors} />}
+        </div>
+      </div>
+    )
+  }
+
+  labelClassName () {
+    const classNames = ["form-check-label"]
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName () {
+    const classNames = ["component-bootstrap-checkbox", "form-group"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}
+
+export default inputWrapper(ApiMakerBootstrapCheckbox, {type: "checkbox"})

package/src/bootstrap/checkboxes.jsx

@@ -0,0 +1,122 @@
+import {digs} from "diggerize"
+import inputWrapper from "../inputs/input-wrapper"
+import inflection from "inflection"
+import InvalidFeedback from "./invalid-feedback"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+
+class ApiMakerBootstrapCheckboxes extends React.PureComponent {
+  static propTypes = propTypesExact({
+    attribute: PropTypes.string,
+    defaultValue: PropTypes.array,
+    inputProps: PropTypes.object.isRequired,
+    label: PropTypes.string,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    options: PropTypes.array.isRequired,
+    wrapperOpts: PropTypes.object.isRequired
+  })
+
+  render () {
+    return (
+      <div className="component-bootstrap-checkboxes form-group">
+        <label className={this.labelClassName()}>
+          {this.props.wrapperOpts.label}
+        </label>
+
+        <input name={this.inputName()} ref={this.props.inputProps.ref} type="hidden" value="" />
+        {this.props.options.map((option, index) => this.optionElement(option, index))}
+      </div>
+    )
+  }
+
+  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]()
+    }
+  }
+
+  inputCheckboxClassName () {
+    const classNames = []
+
+    if (this.props.wrapperOpts.errors.length > 0) classNames.push("is-invalid")
+
+    return classNames.join(" ")
+  }
+
+  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)}]`
+    }
+  }
+
+  isDefaultSelected (option) {
+    let defaultValue = this.inputDefaultValue()
+
+    if (!defaultValue) return false
+
+    if (defaultValue.constructor === Array) {
+      return defaultValue.includes(option)
+    } else {
+      return defaultValue == option
+    }
+  }
+
+  labelClassName () {
+    const classNames = []
+
+    if (this.props.labelClassName) classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  generatedId () {
+    if (!this.generatedIdValue)
+      this.generatedIdValue = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+
+    return this.generatedIdValue
+  }
+
+  optionElement (option, index) {
+    const {onChange, options, wrapperOpts} = this.props
+    const {errors} = digs(wrapperOpts, "errors")
+    const id = `${this.generatedId()}-${index}`
+
+    return (
+      <div className="checkboxes-option" key={`option-${option[1]}`}>
+        <input
+          className={this.inputCheckboxClassName()}
+          data-option-value={option[1]}
+          defaultChecked={this.isDefaultSelected(option[1])}
+          id={id}
+          name={this.inputName()}
+          onChange={onChange}
+          type="checkbox"
+          value={option[1]}
+        />
+
+        <label className="ml-1" htmlFor={id}>
+          {option[0]}
+        </label>
+
+        {(index + 1) == options.length && errors.length > 0 &&
+          <InvalidFeedback errors={errors} />
+        }
+      </div>
+    )
+  }
+}
+
+export default inputWrapper(ApiMakerBootstrapCheckboxes)

package/src/bootstrap/input.jsx

@@ -0,0 +1,160 @@
+import {digs} from "diggerize"
+import inputWrapper from "../inputs/input-wrapper"
+import {Input} from "../inputs/input"
+import InvalidFeedback from "./invalid-feedback"
+import Money from "../inputs/money"
+import PropTypes from "prop-types"
+import React from "react"
+
+class ApiMakerBootstrapInput extends React.PureComponent {
+  static propTypes = {
+    append: PropTypes.node,
+    appendText: PropTypes.node,
+    attribute: PropTypes.string,
+    className: PropTypes.string,
+    currenciesCollection: PropTypes.array,
+    currencyName: PropTypes.string,
+    hint: PropTypes.node,
+    hintBottom: PropTypes.node,
+    id: PropTypes.string,
+    label: PropTypes.node,
+    labelClassName: PropTypes.string,
+    model: PropTypes.object,
+    name: PropTypes.string,
+    placeholder: PropTypes.node,
+    prepend: PropTypes.node,
+    prependText: PropTypes.node,
+    small: PropTypes.bool,
+    type: PropTypes.string,
+    wrapperClassName: PropTypes.string
+  }
+
+  render () {
+    const {
+      append,
+      appendText,
+      attribute,
+      className,
+      currenciesCollection,
+      currencyName,
+      hint,
+      hintBottom,
+      id,
+      inputClassName,
+      inputProps,
+      inputRef,
+      label,
+      labelClassName,
+      model,
+      name,
+      prepend,
+      prependText,
+      type,
+      wrapperClassName,
+      wrapperOpts,
+      ...restProps
+    } = this.props
+    const {ref, ...forwardedInputProps} = inputProps
+    const {errors} = digs(wrapperOpts, "errors")
+
+    return (
+      <div className={this.wrapperClassName()} ref="wrapper">
+        {wrapperOpts.label &&
+          <label className={this.labelClassName()} htmlFor={inputProps.id}>
+            {wrapperOpts.label}
+          </label>
+        }
+        {hint &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {hint}
+          </span>
+        }
+        {type == "money" &&
+          <Money
+            attribute={attribute}
+            currenciesCollection={currenciesCollection}
+            currencyName={currencyName}
+            model={model}
+            name={inputProps.name}
+            className={this.inputClassName()}
+            onChange={this.props.onChange}
+            placeholder={this.props.placeholder}
+            small={this.props.small}
+            ref="money"
+          />
+        }
+        {type != "money" &&
+          <div className="input-group">
+            {(prepend || prependText) &&
+              <div className="input-group-prepend">
+                {prependText &&
+                  <span className="input-group-text">
+                    {prependText}
+                  </span>
+                }
+                {prepend}
+              </div>
+            }
+            <Input
+              attribute={attribute}
+              className={this.inputClassName()}
+              inputProps={inputProps}
+              model={model}
+              wrapperOpts={wrapperOpts}
+              {...forwardedInputProps}
+              {...restProps}
+            />
+            {(append || appendText) &&
+              <div className="input-group-append">
+                {appendText &&
+                  <span className="input-group-text">
+                    {appendText}
+                  </span>
+                }
+                {append}
+              </div>
+            }
+            {errors.length > 0 && <InvalidFeedback errors={errors} />}
+          </div>
+        }
+        {hintBottom &&
+          <span className="form-text text-muted font-smoothing font-xs">
+            {hintBottom}
+          </span>
+        }
+      </div>
+    )
+  }
+
+  inputClassName () {
+    const classNames = ["form-control"]
+
+    if (this.props.className)
+      classNames.push(this.props.className)
+
+    if (this.props.wrapperOpts.errors.length > 0)
+      classNames.push("is-invalid")
+
+    return classNames.join(" ")
+  }
+
+  labelClassName () {
+    const classNames = []
+
+    if (this.props.labelClassName)
+      classNames.push(this.props.labelClassName)
+
+    return classNames.join(" ")
+  }
+
+  wrapperClassName () {
+    const classNames = ["form-group", "component-bootstrap-string-input"]
+
+    if (this.props.wrapperClassName)
+      classNames.push(this.props.wrapperClassName)
+
+    return classNames.join(" ")
+  }
+}
+
+export default inputWrapper(ApiMakerBootstrapInput)

package/src/bootstrap/invalid-feedback.jsx

@@ -0,0 +1,31 @@
+import {digs} from "diggerize"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import React from "react"
+
+export default class ApiMakerBootstrapInvalidFeedback extends React.PureComponent {
+  static propTypes = propTypesExact({
+    errors: PropTypes.array.isRequired
+  })
+
+  render () {
+    return (
+      <div className="invalid-feedback">
+        {this.errorMessages().join(". ")}
+      </div>
+    )
+  }
+
+  errorMessages () {
+    const {errors} = digs(this.props, "errors")
+    const errorMessages = []
+
+    for (const error of errors) {
+      for (const errorMessage of error.getErrorMessages()) {
+        errorMessages.push(errorMessage)
+      }
+    }
+
+    return errorMessages
+  }
+}