@scenid/react-formulator 0.5.3 → 0.5.5

package/functions/package.json

@@ -1,29 +0,0 @@
-{
-  "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/rollup.config.js

@@ -1,40 +0,0 @@
-import babel from '@rollup/plugin-babel'
-
-import peerDepsExternal from 'rollup-plugin-peer-deps-external'
-import resolve from '@rollup/plugin-node-resolve'
-import commonjs from '@rollup/plugin-commonjs'
-import css from "rollup-plugin-import-css"
-
-import pkg from './package.json'
-
-export default {
-  input: 'src/index.js',
-  output: [
-    { file: pkg.main, format: 'cjs' },
-    { file: pkg.module, format: 'esm' }
-  ],
-  plugins: [
-    peerDepsExternal(),
-    babel({
-      babelHelpers: 'runtime',
-      exclude: 'node_modules/**',
-      presets: [
-        '@babel/preset-env',
-        '@babel/preset-react'
-      ],
-      plugins: [
-        '@babel/plugin-proposal-export-default-from',
-        [
-          '@babel/transform-runtime',
-          { regenerator: true }
-        ]
-      ]
-    }),
-    resolve({
-      extensions: ['.js', '.jsx'],
-      preferBuiltins: true
-    }),
-    commonjs(),
-    css()
-  ]
-}

package/src/Components/HiddenData.jsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Box, Typography } from '@material-ui/core'
-import { Alert } from '@material-ui/lab'
-
-const HiddenData = ({ subject, label }) => (
-  <Box mb={2}>
-    <Alert severity="warning">
-      <Typography variant="body1">
-        {subject ? `${subject} ` : ''}
-        <span style={{ fontWeight: 'bold' }}>{label}</span>
-        &nbsp;ist ausgeblendet.
-      </Typography>
-    </Alert>
-  </Box>
-)
-
-HiddenData.propTypes = {
-  subject: PropTypes.string,
-  label: PropTypes.string.isRequired
-}
-
-export default HiddenData

package/src/Components/SelectOrCreate.jsx

@@ -1,156 +0,0 @@
-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

@@ -1,155 +0,0 @@
-import React, { useEffect, useCallback } from 'react'
-import PropTypes from 'prop-types'
-
-import {
-  Box,
-  Typography,
-  FormControl,
-  FormHelperText,
-  TextField,
-  InputAdornment,
-  CircularProgress
-} from '@material-ui/core'
-
-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])
-
-  useEffect(() => {
-    if (!readOnly) {
-      fetch()
-    }
-  }, [])
-
-  if (readOnly) {
-    return <FormReadOnlyText name={name} value={value} />
-  }
-
-  if (!options) {
-    return (
-      <FormControl
-        error={dirty && hasErrors}
-        margin="dense"
-        fullWidth
-        required={required}
-      >
-        <TextField
-          label={label}
-          variant={variant}
-          value={value}
-          disabled
-          InputProps={{
-            endAdornment: (
-              <InputAdornment position="end">
-                <CircularProgress
-                  size={20}
-                  thickness={4}
-                />
-              </InputAdornment>
-            )
-          }}
-        />
-      </FormControl>
-    )
-  }
-
-  return (
-    <FormControl
-      error={dirty && hasErrors}
-      margin="dense"
-      fullWidth
-      required={required}
-    >
-      <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 && option.count !== null)
-                && (
-                  <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 && !disabled && 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

@@ -1,83 +0,0 @@
-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()
-
-  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) {
-      setLoading(false)
-    }
-
-    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

@@ -1,46 +0,0 @@
-import React from 'react'
-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 FormBoolean = ({ variant, name, value, defaultValue, needsToBeTrue, onChange }) => {
-  const handleChange = e => {
-    let newValue = e.target.checked
-    if (needsToBeTrue === true && newValue === false) newValue = undefined
-    onChange({ target: { name, value: newValue } })
-  }
-
-  if (variant === 'checkbox') {
-    return (
-      <Checkbox
-        color="primary"
-        name={name}
-        checked={isChecked(value, defaultValue)}
-        onChange={handleChange}
-      />
-    )
-  }
-
-  return (
-    <Switch
-      color="primary"
-      name={name}
-      checked={isChecked(value, defaultValue)}
-      onChange={handleChange}
-    />
-  )
-}
-
-FormBoolean.propTypes = {
-  variant: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.bool,
-  defaultValue: PropTypes.bool,
-  needsToBeTrue: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
-}
-
-export default FormBoolean

package/src/Editable/FormCatalogType.jsx

@@ -1,29 +0,0 @@
-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