@scenid/react-formulator 0.0.2

package/firebase.json

@@ -0,0 +1,17 @@
+{
+  "hosting": {
+    "site": "react-formulator",
+    "public": "storybook-static",
+    "ignore": [
+      "firebase.json",
+      "**/.*",
+      "**/node_modules/**"
+    ],
+    "rewrites": [
+      {
+        "source": "**",
+        "destination": "/index.html"
+      }
+    ]
+  }
+}

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@scenid/react-formulator",
+  "version": "0.0.2",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "repository": "https://dennykoch@bitbucket.org/scenid/react-formulator.git",
+  "author": "Denny Koch <denny.koch@scenid.com>",
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "rollup -c",
+    "storybook": "start-storybook -p 6006",
+    "storybook:build": "build-storybook",
+    "prepublishOnly": "yarn build",
+    "git:pushall": "git push && git push --tags",
+    "patch": "npm version patch && yarn git:pushall",
+    "minor": "npm version minor && yarn git:pushall",
+    "major": "npm version major && yarn git:pushall"
+  },
+  "peerDependencies": {
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/styles": "^4.11.5",
+    "classnames": "^2.3.1",
+    "prop-types": "^15.8.1",
+    "react": "16.11.0",
+    "react-dom": "16.11.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@material-ui/core": "^4.12.4",
+    "@material-ui/icons": "^4.11.3",
+    "@material-ui/lab": "^4.0.0-alpha.61",
+    "@material-ui/styles": "^4.11.5",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
+    "@scenid/cloud-icons": "^2.6.0",
+    "@scenid/formulator": "^2.0.2",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/testing-library": "^0.0.11",
+    "babel-loader": "^8.2.5",
+    "classnames": "^2.3.1",
+    "cross-env": "^7.0.3",
+    "deep-equal": "^2.0.5",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-formatter-pretty": "^2.1.1",
+    "eslint-import-resolver-webpack": "^0.11.1",
+    "eslint-plugin-compat": "^3.1.2",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-jest": "^22.7.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-react": "^7.6.1",
+    "eslint-plugin-react-hooks": "^2.3.0",
+    "eventemitter3": "^4.0.7",
+    "micromustache": "^8.0.3",
+    "prop-types": "^15.8.1",
+    "react": "16.11.0",
+    "react-dom": "16.11.0",
+    "react-markdown": "^8.0.3",
+    "rehype-highlight": "^5.0.2",
+    "remark-gfm": "^3.0.1",
+    "rollup": "^2.70.2",
+    "rollup-plugin-import-css": "^3.0.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,35 @@
+import babel from '@rollup/plugin-babel'
+
+import resolve from '@rollup/plugin-node-resolve'
+import { terser } from 'rollup-plugin-terser'
+import commonjs from '@rollup/plugin-commonjs'
+import peerDepsExternal from 'rollup-plugin-peer-deps-external'
+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/transform-runtime',
+          { regenerator: true }
+        ]
+      ]
+    }),
+    resolve({ extensions: ['.js', '.jsx'] }),
+    commonjs(),
+    css(),
+    terser()
+  ]
+}

package/src/Editable/FormBoolean.jsx

@@ -0,0 +1,44 @@
+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
+        name={name}
+        checked={isChecked(value, defaultValue)}
+        onChange={handleChange}
+      />
+    )
+  }
+
+  return (
+    <Switch
+      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/FormField.jsx

@@ -0,0 +1,223 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import cx from 'classnames'
+
+import isEqual from 'deep-equal'
+
+import {
+  FormControl,
+  FormHelperText,
+  InputAdornment,
+  FormControlLabel,
+  FormGroup
+} from '@material-ui/core'
+
+import { makeStyles } from '@material-ui/styles'
+
+import AutorenewIcon from '@material-ui/icons/Autorenew'
+
+const useStyles = makeStyles(theme => ({ error: { color: theme.palette.error.main } }))
+
+const FormControlField = ({
+  variant,
+  type,
+  isRender,
+  name,
+  label,
+  component,
+  componentProps,
+  defaultValue,
+  value,
+  disabled,
+  options,
+  hasErrors,
+  errors,
+  required,
+  validating,
+  dirty,
+  onChange
+}) => {
+  const styles = useStyles()
+
+  const finalProps = {
+    name,
+    label,
+    defaultValue,
+    value,
+    options,
+    required,
+    disabled,
+    ...componentProps,
+    onChange
+  }
+
+  if (validating) {
+    finalProps.endAdornment = [(
+      <InputAdornment position="end">
+        <AutorenewIcon />
+      </InputAdornment>
+    )]
+  }
+
+  let control
+  if (isRender) {
+    control = React.cloneElement(
+      component,
+      {
+        variant,
+        ...finalProps,
+        label,
+        hasErrors,
+        errors,
+        dirty
+      }
+    )
+  } else {
+    control = React.createElement(
+      component,
+      {
+        variant,
+        ...finalProps
+      }
+    )
+  }
+
+  const isSwitch = type === 'boolean'
+  const isRepeater = type === 'array' && !isRender
+
+  if (isRepeater || isRender) {
+    return control
+  }
+
+  return (
+    <FormControl
+      className="data-card-field"
+      error={dirty && hasErrors}
+      variant={variant}
+      margin="dense"
+      fullWidth
+      required={required}
+    >
+      {
+        isSwitch
+          && (
+            <FormControlLabel
+              className={cx({ [styles.error]: dirty && hasErrors })}
+              control={control}
+              label={label}
+              labelPlacement={finalProps.labelPlacement || 'end'}
+            />
+          )
+      }
+      {
+        (!isSwitch && !isRepeater && !isRender)
+          && control
+      }
+      {
+        (dirty && hasErrors)
+          && (
+            <FormHelperText>
+              {errors.map(e => e.message).join('. ')}
+            </FormHelperText>
+          )
+      }
+    </FormControl>
+  )
+}
+
+FormControlField.propTypes = {
+  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  isRender: PropTypes.bool,
+  component: PropTypes.any.isRequired,
+  componentProps: PropTypes.object,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool
+  ]),
+  labelPlacement: PropTypes.oneOf(['top', 'start', 'bottom', 'end']),
+  defaultValue: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array,
+    PropTypes.object
+  ]),
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array,
+    PropTypes.object
+  ]),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any
+  })),
+  hasErrors: PropTypes.bool,
+  errors: PropTypes.array,
+  validating: PropTypes.bool,
+  dirty: PropTypes.bool,
+  required: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+}
+
+const FormField = ({
+  prepend,
+  append,
+  componentProps,
+  ...fieldProps
+}) => {
+  const finalProps = {
+    componentProps,
+    ...fieldProps
+  }
+
+  if (componentProps?.type === 'hidden') {
+    return <input type="hidden" name={fieldProps.name} value={fieldProps.value} />
+  }
+
+  return (
+    <FormGroup>
+      {prepend}
+      {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+      <FormControlField {...finalProps} />
+      {append}
+    </FormGroup>
+  )
+}
+
+FormField.propTypes = {
+  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  isRender: PropTypes.bool,
+  component: PropTypes.any.isRequired,
+  componentProps: PropTypes.object,
+  type: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool
+  ]),
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+    PropTypes.array,
+    PropTypes.object
+  ]),
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any
+  })),
+  prepend: PropTypes.array,
+  append: PropTypes.array,
+  hasErrors: PropTypes.bool,
+  errors: PropTypes.array,
+  validating: PropTypes.bool,
+  required: PropTypes.bool,
+  dirty: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+}
+
+export default React.memo(FormField, (prevProps, nextProps) => isEqual(prevProps, nextProps, { strict: true }))

package/src/Editable/FormNumber.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { TextField } from '@material-ui/core'
+
+import { castToNumber } from '../helpers'
+
+const FormNumber = ({ name, value, min, max, step, onChange, ...props }) => (
+  <TextField
+    name={name}
+    type="number"
+    value={castToNumber(value, step)}
+    inputProps={{ min, max, step }}
+    onChange={e => onChange({
+      target: {
+        name,
+        value: castToNumber(e.target.value, step)
+      }
+    })}
+    {...props}
+  />
+)
+
+FormNumber.propTypes = {
+  name: PropTypes.string.isRequired,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  value: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string
+  ]),
+  onChange: PropTypes.func.isRequired
+}
+
+export default FormNumber

package/src/Editable/FormRepeater.jsx

@@ -0,0 +1,190 @@
+import React, { useState, useEffect } from 'react'
+import PropTypes from 'prop-types'
+
+import {
+  Box,
+  TextField,
+  Button,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  InputAdornment,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem
+} from '@material-ui/core'
+
+import {
+  Delete as DeleteIcon,
+  Clear as ClearIcon,
+  Save as SaveIcon
+} from '@material-ui/icons'
+
+const getValue = (value, catalog) => {
+  if (catalog && catalog[value] !== undefined) return catalog[value]
+  return value
+}
+
+const FormRepeater = ({ variant, name, value, catalog, onChange }) => {
+  const [entries, setEntries] = useState(value || [])
+  const [inEdit, setInEdit] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+
+  const handleEntryAdd = () => {
+    if (inputValue.length > 0) {
+      setEntries([...entries, inputValue])
+      setInputValue('')
+    }
+  }
+
+  const handleCancelNewEntry = () => {
+    setInEdit(false)
+    setInputValue('')
+  }
+
+  const handleEntryDel = delIndex => {
+    const newEntries = [...entries]
+    newEntries.splice(delIndex, 1)
+    setEntries(newEntries)
+  }
+
+  useEffect(() => {
+    onChange({ target: { name, value: entries } })
+  }, [entries])
+
+  let blockedOptions = []
+  if (catalog) {
+    blockedOptions = Object.entries(catalog).filter(e => value.includes(e[0])).map(e => e[0])
+  }
+
+  return (
+    <Box>
+      <List dense>
+        {
+          entries.map((entry, index) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <ListItem key={`entry-${index}`}>
+              <ListItemText primary={getValue(entry, catalog)} />
+              <ListItemSecondaryAction>
+                <IconButton
+                  edge="end"
+                  aria-label="delete"
+                  size="small"
+                  onClick={() => handleEntryDel(index)}
+                >
+                  <DeleteIcon fontSize="small" />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+          ))
+        }
+      </List>
+      {
+        !inEdit
+          && (
+            <Box>
+              <Button
+                color="primary"
+                variant="outlined"
+                onClick={() => setInEdit(true)}
+              >
+                Eintrag hinzufügen
+              </Button>
+            </Box>
+          )
+      }
+      {
+        (inEdit && !catalog)
+          && (
+            <Box
+              width="100%"
+              display="flex"
+              alignItems="center"
+            >
+              <FormControl
+                variant="filled"
+                fullWidth
+              >
+                <TextField
+                  label="Neuer Eintrag"
+                  variant={variant}
+                  value={inputValue}
+                  InputProps={{
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <Box mr={1}>
+                          <IconButton size="small" onClick={handleEntryAdd}>
+                            <SaveIcon fontSize="small" />
+                          </IconButton>
+                        </Box>
+                        <IconButton size="small" onClick={handleCancelNewEntry}>
+                          <ClearIcon fontSize="small" />
+                        </IconButton>
+                      </InputAdornment>
+                    )
+                  }}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') handleEntryAdd()
+                    if (e.key === 'Escape') handleCancelNewEntry()
+                  }}
+                  onChange={e => setInputValue(e.target.value)}
+                />
+              </FormControl>
+            </Box>
+          )
+      }
+      {
+        (inEdit && catalog)
+          && (
+            <Box
+              width="100%"
+              display="flex"
+              alignItems="center"
+            >
+              <FormControl
+                variant="filled"
+                fullWidth
+              >
+                <InputLabel>Neuer Eintrag</InputLabel>
+                <Select
+                  defaultValue="please-select"
+                  onChange={e => setEntries([...entries, e.target.value])}
+                >
+                  <MenuItem value="please-select" disabled>
+                    Eintrag hinzufügen
+                  </MenuItem>
+                  {
+                    Object
+                      .entries(catalog)
+                      .sort((a, b) => a[1].localeCompare(b[1]))
+                      .map(e => (
+                        <MenuItem
+                          key={`option-${e[0]}`}
+                          value={e[0]}
+                          disabled={blockedOptions.includes(e[0])}
+                        >
+                          {e[1]}
+                        </MenuItem>
+                      ))
+                  }
+                </Select>
+              </FormControl>
+            </Box>
+          )
+      }
+    </Box>
+  )
+}
+
+FormRepeater.propTypes = {
+  variant: PropTypes.oneOf(['standard', 'filled', 'outlined']),
+  name: PropTypes.string.isRequired,
+  value: PropTypes.any.isRequired,
+  catalog: PropTypes.object,
+  onChange: PropTypes.func.isRequired
+}
+
+export default FormRepeater

package/src/Editable/FormSelect.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import { TextField, MenuItem } from '@material-ui/core'
+
+const FormSelect = ({ options, required, ...props }) => {
+  let unselectOption = []
+
+  if (!required) {
+    unselectOption = [{ label: 'Auswahl löschen', value: undefined }]
+  }
+
+  const allOptions = [
+    ...unselectOption,
+    ...options.sort((l, r) => l.label.localeCompare(r.label))
+  ]
+
+  return (
+    <TextField
+      select
+      {...props}
+    >
+      {
+        allOptions
+          .map(({ label: itemLabel, value: itemValue }) => (
+            <MenuItem
+              key={itemLabel}
+              value={itemValue}
+            >
+              {itemLabel}
+            </MenuItem>
+          ))
+      }
+    </TextField>
+  )
+}
+
+FormSelect.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string.isRequired,
+    value: PropTypes.any
+  })).isRequired,
+  required: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+}
+
+export default FormSelect

package/src/Editable/FormTextfield.jsx

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