@scenid/react-formulator 0.3.1 → 0.4.0

package/functions/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "functions",
+  "description": "Cloud Functions for Firebase",
+  "scripts": {
+    "lint": "eslint .",
+    "serve": "firebase emulators:start --only functions",
+    "shell": "firebase functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
+  },
+  "engines": {
+    "node": "16"
+  },
+  "main": "index.js",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "eslint-config-standard": "^17.0.0",
+    "express": "^4.18.0",
+    "firebase-admin": "^10.0.2",
+    "firebase-functions": "^3.18.0"
+  },
+  "devDependencies": {
+    "eslint": "^8.9.0",
+    "eslint-config-google": "^0.14.0",
+    "firebase-functions-test": "^0.2.0"
+  },
+  "private": true
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenid/react-formulator",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
@@ -8,7 +8,8 @@
   "license": "UNLICENSED",
   "scripts": {
     "build": "rollup -c",
-    "storybook": "start-storybook -p 6006",
+    "watch": "cross-env STORYBOOK_NODE_ENV=development start-storybook -p 6006",
+    "start:dev": "firebase emulators:start",
     "storybook:build": "build-storybook",
     "storybook:deploy": "yarn storybook:build && firebase deploy",
     "prepublishOnly": "yarn build",

package/src/Components/SelectOrCreate.jsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { TextField, InputAdornment, CircularProgress } from '@material-ui/core'
+
+import Autocomplete, { createFilterOptions } from '@material-ui/lab/Autocomplete'
+
+const filter = createFilterOptions()
+
+const renderInput = (
+  {
+    required,
+    label,
+    onInputChange,
+    variant,
+    loading
+  },
+  params
+) => {
+  let InputProps = params.InputProps || {}
+
+  if (loading) {
+    InputProps = {
+      endAdornment: (
+        <InputAdornment position="end">
+          <CircularProgress
+            size={20}
+            thickness={4}
+          />
+        </InputAdornment>
+      )
+    }
+  }
+
+  return (
+    <TextField
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...params}
+      required={required}
+      label={label}
+      variant={variant}
+      onChange={onInputChange}
+      InputProps={InputProps}
+    />
+  )
+}
+
+const SelectOrCreate = ({
+  id,
+  label,
+  variant,
+  loading,
+  required,
+  disabled,
+  allowCreate,
+  options,
+  searchKey,
+  renderOption,
+  renderNewOption,
+  value,
+  onOpen,
+  onClose,
+  onChange,
+  onInputChange
+}) => (
+  <Autocomplete
+    id={id}
+    value={value}
+    fullWidth
+    disabled={disabled}
+    onOpen={onOpen}
+    onClose={onClose}
+    onChange={(_, newValue) => {
+      if (typeof newValue === 'string') {
+        if (!allowCreate && Array.isArray(options) && !options.find(o => o.entry === newValue)) onChange(undefined)
+        else onChange({ [searchKey]: newValue })
+      } else if (allowCreate && newValue && newValue.inputValue) {
+        // Create a new value from the user input
+        onChange({ [searchKey]: newValue.inputValue })
+      } else {
+        onChange(newValue)
+      }
+    }}
+    filterOptions={(allOptions, params) => {
+      const filtered = filter(allOptions, params)
+
+      // Suggest the creation of a new value
+      if (allowCreate && params.inputValue !== '') {
+        filtered.push({
+          inputValue: params.inputValue,
+          [searchKey]: renderNewOption(params.inputValue)
+        })
+      }
+
+      return filtered
+    }}
+    selectOnFocus
+    clearOnBlur
+    handleHomeEndKeys
+    options={options}
+    getOptionLabel={option => {
+      // Value selected with enter, right from the input
+      if (typeof option === 'string') {
+        if (!allowCreate && Array.isArray(options) && !options.find(o => o.entry === option)) return ''
+        return option
+      }
+
+      // Add "xxx" option created dynamically
+      if (option.inputValue) {
+        return option.inputValue
+      }
+
+      // Regular option
+      return option[searchKey]
+    }}
+    renderOption={renderOption}
+    freeSolo
+    renderInput={params => (
+      renderInput(
+        {
+          required,
+          disabled,
+          label,
+          onInputChange,
+          variant,
+          loading
+        },
+        params
+      )
+    )}
+  />
+)
+
+SelectOrCreate.propTypes = {
+  id: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  variant: PropTypes.string,
+  loading: PropTypes.bool,
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  allowCreate: PropTypes.bool,
+  options: PropTypes.array.isRequired,
+  searchKey: PropTypes.string.isRequired,
+  renderOption: PropTypes.func.isRequired,
+  renderNewOption: PropTypes.func.isRequired,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
+  ]).isRequired,
+  onOpen: PropTypes.func,
+  onClose: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onInputChange: PropTypes.func.isRequired
+}
+
+export default SelectOrCreate

package/src/Editable/FormAutocomplete/FormAutocomplete.jsx

@@ -0,0 +1,121 @@
+import React, { useCallback } from 'react'
+import PropTypes from 'prop-types'
+
+import { Box, Typography, FormControl, FormHelperText } from '@material-ui/core'
+
+import FormField from '../FormField'
+import FormReadOnlyText from '../../ReadOnly/FormReadOnlyText'
+import SelectOrCreate from '../../Components/SelectOrCreate'
+
+import useFetchOptions from './useFetchOptions'
+
+const FormAutocomplete = ({
+  name,
+  label,
+  value,
+  options: optionsArg,
+  baererToken,
+  allowCreate,
+  dirty,
+  hasErrors,
+  errors,
+  variant,
+  required,
+  disabled,
+  readOnly,
+  onChange
+}) => {
+  const { loading, fetch, abort, options } = useFetchOptions(optionsArg, { token: baererToken })
+
+  const changeValue = useCallback(newValue => { onChange({ target: { name, value: newValue?.entry || '' } }) }, [onChange])
+
+  if (readOnly) {
+    return (
+      <FormField
+        component={FormReadOnlyText}
+        type="text"
+        componentProps={{}}
+        name={name}
+        value={value}
+      />
+    )
+  }
+
+  return (
+    <FormControl
+      error={dirty && hasErrors}
+      margin="dense"
+      fullWidth
+    >
+      <SelectOrCreate
+        loading={loading}
+        label={label}
+        variant={variant}
+        allowCreate={allowCreate}
+        options={options}
+        searchKey="entry"
+        required={required}
+        disabled={disabled}
+        renderOption={option => (
+          <Box>
+            <Typography variant="body1">
+              {option.entry}
+            </Typography>
+            {
+              option.count !== undefined
+                && (
+                  <Typography variant="caption">
+                    {`${option.count} Einträge`}
+                  </Typography>
+                )
+            }
+          </Box>
+        )}
+        renderNewOption={newValue => (
+          <Typography variant="body1">
+            <strong>{`"${newValue}" `}</strong>
+            erstellen
+          </Typography>
+        )}
+        value={value}
+        onOpen={() => {
+          changeValue({ entry: value })
+          fetch()
+        }}
+        onClose={abort}
+        onChange={changeValue}
+      />
+      {
+        (dirty && hasErrors)
+          && (
+            <FormHelperText>
+              {errors.map(e => e.message).join('. ')}
+            </FormHelperText>
+          )
+      }
+    </FormControl>
+  )
+}
+
+FormAutocomplete.propTypes = {
+  name: PropTypes.string,
+  label: PropTypes.string,
+  value: PropTypes.any,
+  options: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string,
+    PropTypes.func
+  ]).isRequired,
+  baererToken: PropTypes.string,
+  allowCreate: PropTypes.bool,
+  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  required: PropTypes.bool,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  dirty: PropTypes.bool,
+  hasErrors: PropTypes.bool,
+  errors: PropTypes.array,
+  onChange: PropTypes.func
+}
+
+export default FormAutocomplete

package/src/Editable/FormAutocomplete/useFetchOptions.js

@@ -0,0 +1,83 @@
+import { useCallback, useRef, useState } from 'react'
+
+const abortableOAuthFetch = async (url, { token, signal }) => {
+  let r, text, result
+  try {
+    const options = {
+      method: 'GET'
+    }
+
+    if (token) {
+      options.headers = {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${token}`
+      }
+    }
+
+    if (signal) {
+      options.signal = signal
+    }
+
+    r = await fetch(url, options)
+
+    text = await r.text()
+    result = JSON.parse(text)
+  } catch (e) {
+    throw new Error(text)
+  }
+
+  if (!r.ok) throw new Error(result.error)
+
+  return result
+}
+
+const useFetchOptions = (arg, fetchOptions = {}) => {
+  const controller = useRef()
+
+  const [loading, setLoading] = useState(false)
+  const [options, setOptions] = useState(Array.isArray(arg) || [])
+
+  const fetch = useCallback(async () => {
+    if (Array.isArray(arg)) return setOptions(arg)
+    if (typeof arg !== 'string' && typeof arg !== 'function') return setOptions([])
+
+    let fetcher = arg
+    if (typeof arg === 'string') {
+      fetcher = signal => abortableOAuthFetch(arg, { token: fetchOptions.token, signal })
+    }
+
+    controller.current = new AbortController()
+    setLoading(true)
+
+    try {
+      const r = await fetcher(controller.current.signal)
+      controller.current = undefined
+
+      if (!Array.isArray(r)) throw new Error('autocomplete fetcher returned a non array value')
+
+      setOptions(r)
+    } catch (e) {
+      console.log(e)
+    }
+
+    setLoading(false)
+  }, [arg, controller.current, setLoading, setOptions])
+
+  const abort = useCallback(() => {
+    if (loading) setLoading(false)
+
+    if (controller.current) {
+      controller.current.abort()
+      controller.current = undefined
+    }
+  }, [loading, setLoading, controller.current])
+
+  return {
+    loading,
+    fetch,
+    abort,
+    options
+  }
+}
+
+export default useFetchOptions

package/src/Editable/FormBoolean.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { Checkbox, Switch } from '@material-ui/core'
 
 const isBoolean = val => val === false || val === true
-const isChecked = (value, defaultValue) => isBoolean(value) ? value : (defaultValue || false)
+const isChecked = (value, defaultValue) => (isBoolean(value) ? value : (defaultValue || false))
 
 const FormBoolean = ({ variant, name, value, defaultValue, needsToBeTrue, onChange }) => {
   const handleChange = e => {

package/src/Editable/FormCatalogType.jsx

@@ -0,0 +1,29 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import FormAutocomplete from './FormAutocomplete/FormAutocomplete'
+import FormSelect from './FormSelect'
+
+const FormCatalogType = ({ type, options, autocomplete, ...props }) => {
+  if (autocomplete === true) {
+    return (
+      <FormAutocomplete
+        type="autocomplete"
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        options={options.map(entry => ({ entry: entry.value }))}
+      />
+    )
+  }
+
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <FormSelect type={type} options={options} {...props} />
+}
+
+FormCatalogType.propTypes = {
+  type: PropTypes.string.isRequired,
+  options: PropTypes.array.isRequired,
+  autocomplete: PropTypes.bool
+}
+
+export default FormCatalogType

package/src/Editable/FormField.jsx

@@ -27,11 +27,11 @@ const FormControlField = ({
   componentProps,
   defaultValue,
   value,
-  disabled,
   options,
   hasErrors,
   errors,
   required,
+  disabled,
   validating,
   dirty,
   onChange
@@ -63,11 +63,13 @@ const FormControlField = ({
   let control
   if (isRender) {
     try {
+      const oldProps = component.props || {}
       control = React.cloneElement(
         component,
         {
-          variant,
           ...finalProps,
+          ...oldProps,
+          variant,
           label,
           hasErrors,
           errors,
@@ -143,7 +145,6 @@ FormControlField.propTypes = {
     PropTypes.string,
     PropTypes.bool
   ]),
-  labelPlacement: PropTypes.oneOf(['top', 'start', 'bottom', 'end']),
   defaultValue: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
@@ -167,6 +168,7 @@ FormControlField.propTypes = {
   validating: PropTypes.bool,
   dirty: PropTypes.bool,
   required: PropTypes.bool,
+  disabled: PropTypes.bool,
   onChange: PropTypes.func.isRequired
 }
 

package/src/Editable/FormRepeater.jsx

@@ -52,7 +52,8 @@ const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
   }
 
   useEffect(() => {
-    onChange({ target: { name, value: entries } })
+    const newValue = entries.length > 0 ? entries : undefined
+    onChange({ target: { name, value: newValue } })
   }, [entries])
 
   let blockedOptions = []

package/src/Editable/FormSelect.jsx

@@ -20,6 +20,7 @@ const FormSelect = ({ options, required, value, ...props }) => {
       select
       required={required}
       value={value === undefined ? '' : value}
+      // eslint-disable-next-line react/jsx-props-no-spreading
       {...props}
     >
       {

package/src/Editable/FormText.jsx

@@ -1,13 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 
 import { TextField } from '@material-ui/core'
 
-// eslint-disable-next-line react/prop-types, react/jsx-props-no-spreading
-export default props => {
+const FormText = props => {
+  const { type } = props
   const finalProps = { ...props }
-  if (props.type === 'date' || props.type === 'datetime-local') {
-    finalProps.InputLabelProps={ shrink: true }
+
+  if (type === 'date' || type === 'datetime-local') {
+    finalProps.InputLabelProps = { shrink: true }
   }
 
-  return <TextField {...finalProps} />
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <TextField type={type} {...finalProps} />
 }
+
+FormText.propTypes = { type: PropTypes.string }
+
+export default FormText

package/src/FormulatorForm.jsx

@@ -8,7 +8,7 @@ import isEqual from 'fast-deep-equal'
 import { render as mm } from 'micromustache'
 
 import FormulatorFormSection from './FormulatorFormSection'
-import HiddenData from './HiddenData'
+import HiddenData from './Components/HiddenData'
 
 import 'highlight.js/styles/shades-of-purple.css'
 
@@ -410,7 +410,7 @@ class FormulatorForm extends React.Component {
           renderSchema.groups
             .map(({ id: sectionId, label, description, fields }) => {
               if (readOnly && Array.isArray(obscuredGroups) && obscuredGroups.includes(sectionId)) {
-                return <HiddenData subject="Der Bereich" label={label} />
+                return <HiddenData key={`hidden-field-${sectionId}`} subject="Der Bereich" label={label} />
               }
 
               return (

package/src/FormulatorFormSection.jsx

@@ -11,7 +11,7 @@ import FormSectionBlock from './FormSectionBlock'
 import FormField from './Editable/FormField'
 import FormText from './Editable/FormText'
 import FormNumber from './Editable/FormNumber'
-import FormSelect from './Editable/FormSelect'
+import FormCatalogType from './Editable/FormCatalogType'
 import FormBoolean from './Editable/FormBoolean'
 import FormRepeater from './Editable/FormRepeater'
 
@@ -23,7 +23,7 @@ import FormReadOnlySelect from './ReadOnly/FormReadOnlySelect'
 import FormReadOnlyBoolean from './ReadOnly/FormReadOnlyBoolean'
 import FormReadOnlyRepeater from './ReadOnly/FormReadOnlyRepeater'
 
-import HiddenData from './HiddenData'
+import HiddenData from './Components/HiddenData'
 
 const formReadOnlyComponentMap = {
   default: FormReadOnlyText,
@@ -39,7 +39,7 @@ const formComponentMap = {
   default: FormText,
   string: FormText,
   number: FormNumber,
-  select: FormSelect,
+  select: FormCatalogType,
   boolean: FormBoolean,
   array: FormRepeater
 }
@@ -48,7 +48,7 @@ const apComponentMap = {
   default: Input,
   string: Input,
   number: FormNumber,
-  select: FormSelect,
+  select: FormCatalogType,
   boolean: FormBoolean
 }
 
@@ -242,7 +242,7 @@ class FormulatorFormSection extends React.Component {
             if (readOnly) {
               if (!value) return false
               if (Array.isArray(obscuredFields) && obscuredFields.includes(name)) {
-                return <HiddenData subject="Das Feld" label={label} />
+                return <HiddenData key={`hidden-field-${name}`} subject="Das Feld" label={label} />
               }
             }
 

package/src/ReadOnly/FormReadOnlyField.jsx

@@ -28,7 +28,7 @@ const FormControlField = ({
   }
 
   let control
-  if (type === '@@render') control = React.cloneElement(component, finalProps);
+  if (type === '@@render') control = React.cloneElement(component, finalProps)
   else control = React.createElement(component, finalProps)
 
   return (

package/src/ReadOnly/FormReadOnlyText.jsx

@@ -5,11 +5,18 @@ import { Typography } from '@material-ui/core'
 
 import { DateTime } from 'luxon'
 
-const FormReadOnlyText = ({ value, type }) => {
+const FormReadOnlyText = ({ value, type, renderFormat }) => {
   let finalValue = value
 
   if (type === 'date' || type === 'datetime-local') {
-    finalValue = DateTime.fromISO(value).toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)
+    let formatter = DateTime.DATETIME_FULL
+
+    if (renderFormat) {
+      if (typeof renderFormat === 'string') formatter = DateTime[renderFormat]
+      else formatter = renderFormat
+    }
+
+    finalValue = DateTime.fromISO(value).toLocaleString(formatter)
   }
 
   return (
@@ -23,6 +30,11 @@ FormReadOnlyText.propTypes = {
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string
+  ]),
+  type: PropTypes.string,
+  renderFormat: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object
   ])
 }
 

package/src/index.js

@@ -6,6 +6,7 @@ export FormNumber from './Editable/FormNumber'
 export FormRepeater from './Editable/FormRepeater'
 export FormSelect from './Editable/FormSelect'
 export FormText from './Editable/FormText'
+export FormAutocomplete from './Editable/FormAutocomplete/FormAutocomplete'
 
 export FormReadOnlyField from './ReadOnly/FormReadOnlyField'
 export FormReadOnlyBoolean from './ReadOnly/FormReadOnlyBoolean'
@@ -14,3 +15,6 @@ export FormReadOnlyRepeater from './ReadOnly/FormReadOnlyRepeater'
 export FormReadOnlySelect from './ReadOnly/FormReadOnlySelect'
 export FormReadOnlyText from './ReadOnly/FormReadOnlyText'
 export FormReadOnlyMarkdown from './ReadOnly/FormReadOnlyMarkdown'
+
+export HiddenData from './Components/HiddenData'
+export SelectOrCreate from './Components/SelectOrCreate'

package/stories/CustomRenderField.jsx

@@ -12,7 +12,7 @@ const CustomRenderField = ({ name, value, onChange, ...props }) => {
   }
 
   useEffect(() => {
-    setDeg(value?.length * 10)
+    setDeg((value?.length || 0) * 10)
   }, [value])
 
   return (
@@ -38,9 +38,9 @@ const CustomRenderField = ({ name, value, onChange, ...props }) => {
 }
 
 CustomRenderField.propTypes = {
-  name: PropTypes.string.isRequired,
+  name: PropTypes.string,
   value: PropTypes.string,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func
 }
 
 export default CustomRenderField