@startlibs/form 1.0.12 → 1.1.0

package/src/ExpandableBox.jsx

@@ -0,0 +1,207 @@
+import {darken} from 'polished'
+import React, {useEffect, useRef} from 'react'
+import _ from 'lodash/fp'
+import styled, {css} from 'styled-components'
+
+import {callIfFunction, animationTiming, oneWayAnimation} from '@startlibs/utils'
+import {useFormValue} from './Form'
+import {useRefState, useRecycleFocus, useLazyConstant, useToggle} from '@startlibs/core'
+import {willUseFlipSwitch, SwitchDiv} from '@startlibs/components'
+import {media} from '@startlibs/utils';
+
+import {Icon} from '@startlibs/components'
+import { constrainEvent, getColor } from '@startlibs/utils';
+import {useTransientErrorHelper} from './Errors'
+
+
+const shouldPreventExpand = (e,fn) => !(e.target).closest('body,[data-expand="false"],label,input,textarea,button').matches('body,[data-expand="true"]')
+
+const ExpandableBoxStyled = styled.div`
+  padding: 1rem;
+  border-radius: 8px;
+  background: ${getColor('lightBluishGray')};
+  font-size: 14px;
+  outline: none;
+  transition: background 0.2s linear;
+  position: relative;
+  ${props => props.small && `
+    padding: 0.875rem 1rem;
+    min-height: 3rem;
+  `}
+  ${props => props.collapsed ? css`
+    cursor: pointer;
+    padding-right: 3.25rem;
+    :hover {
+      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
+    }
+    :active {
+      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
+      transition: none;
+    }
+  `: css`
+    padding: 1.5rem;
+    ${media.max(340)`
+      padding 1rem;
+    `}
+    ${props => props.fixMarginBottom && `
+      padding-bottom: 0.5rem !important;
+    `}
+  `}
+  & ~ & {
+    margin-top: 0.75rem;
+  }
+  ${SwitchDiv} & {
+    margin-top: 0.75rem;
+  }
+`
+const EditIcon = styled(Icon).attrs({icon:'edit', className: 'expandable-edit-icon'})`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: -24px;
+  color: rgba(0,0,0,0.25);
+  font-size: 20px;
+`
+export const checkErrors = (...checks) => (v,setErrors) => {
+  const results = checks.map(c => c(v)).filter(Boolean)
+  if (!results.length) { return true }
+  const messages = results.filter(_.negate(_.isBoolean))
+  if (messages.length) {
+    setErrors(...messages)
+  }
+  return false
+}
+
+const timing = animationTiming('0.25s ease-out')
+const switchAnimation = oneWayAnimation('opacity: 1;transform:translateY(0);','opacity: 0;', 'opacity: 0; transform:translateY(30px);')
+const AUTO_OPENED = {}
+let hasAnyExpanded = 0
+export const ExpandableBox = styled(({className, children, overflowEffect, recycleTab, escCancels, enterConfirms, withIcon = true, info, isOpen, openWhen, canExpand = _.identity, path, retargetFilter = (el) => el?.tagName?.toLowerCase() === "button", isValid = () => true, fixMarginBottom, animation = switchAnimation, animationTiming = timing}) => {
+  const flipAnimation = useLazyConstant(willUseFlipSwitch)
+  const [value,setValue,getValue] = useFormValue(path)
+  const [_setErrors,clearErrors] = useTransientErrorHelper()
+  const previousValue = useRefState()
+  const isAutoOpened = useToggle(isOpen)
+  const containerRef = useRef()
+
+  const setErrors = (...errors) => {
+    _setErrors(errors.length ? errors.map(k => _.isString(k) ? [k,''] : k) : [[path,'']])
+    return true
+  }
+
+  const expand = useToggle(isOpen,(newV,prevV) => {
+    if (newV === 0 || prevV === 0) { return }
+    if (newV === false) {
+      const result = isValid(getValue(),setErrors)
+      if (result === true) {
+        clearErrors()
+      }
+      return result
+    }
+  })
+
+  const [firstFocus,lastFocus] = useRecycleFocus(containerRef,recycleTab && expand.isOpen, recycleTab)
+
+  const openWhenResult = callIfFunction(openWhen)
+  useEffect(() => {
+    if (openWhenResult) {
+      expand.open()
+    }
+  },[openWhenResult])
+
+
+  useEffect(() => () => {
+    if (expand.get() === 0) {
+      expand.close()
+    }
+  },[expand.isOpen])
+  useEffect(() => {
+    if (expand.get() && !isAutoOpened.get()) {
+      previousValue.set(getValue())
+      hasAnyExpanded += 1
+      return () => {
+        hasAnyExpanded -= 1
+      }
+    }
+  },[expand.isOpen,isAutoOpened.isOpen])
+
+  const cancel = () => {
+    setValue(previousValue.get())
+    expand.close()
+  }
+
+  const utils = useLazyConstant(()=> ({close: constrainEvent(expand.close),setValue,cancel}))
+
+  const onBlur = (e) =>{
+    if (e.currentTarget !== e.relatedTarget && (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget))) {
+      const retarget = callIfFunction(retargetFilter,e.relatedTarget)
+      if (retarget === true) {
+        e.target.focus()
+      } else if (retarget === false) {
+        expand.close()
+      }
+    }
+  }
+
+  const checkEscEnter = (e) => {
+    if (e.key === 'Enter' && enterConfirms) {
+      e.stopPropagation()
+      e.preventDefault()
+      expand.close()
+    } else if (e.key === 'Escape' && escCancels) {
+      e.stopPropagation()
+      e.preventDefault()
+      cancel()
+    }
+  }
+
+  const onClick = (e) => !shouldPreventExpand(e) && callIfFunction(canExpand,e) && !hasAnyExpanded && expand.open()
+
+  return <ExpandableBoxStyled
+    className={className + (expand.isOpen && (enterConfirms || escCancels) ? " JS-dialog-skip-evts" : "")}
+    ref={containerRef}
+    tabIndex={-1}
+    onBlur={onBlur}
+    onFocus={isAutoOpened.close}
+    collapsed={!expand.isOpen} fixMarginBottom={fixMarginBottom}
+    onClick={onClick}
+    onKeyDown={checkEscEnter}
+  >
+    {expand.isOpen && firstFocus}
+    <FlipDiv
+      key={expand.isOpen}
+      overflowEffect={overflowEffect}
+      useAnimation={flipAnimation}
+      animation={animation}
+      animationTiming={animationTiming}
+    >{
+      expand.isOpen ? callIfFunction(children,value,utils) : <>{callIfFunction(info, value, utils)}{withIcon && <EditIcon/>}</>
+    }</FlipDiv>
+    {expand.isOpen && lastFocus}
+  </ExpandableBoxStyled>
+})`
+
+`
+
+const overflowEffect = (element) => {
+  if (!element?.offsetParent?.parentElement) { return }
+  const parentDom = element.offsetParent.parentElement
+  const previousOverflow = parentDom.style.overflow
+  parentDom.style.overflow = 'hidden'
+  return () => parentDom.style.overflow = previousOverflow
+}
+
+export const PseudoExpandableBox = ({children, small, onClick}) => <ExpandableBoxStyled collapsed small={small} onClick={onClick}>
+    <FlipDivStyle>
+      {children}
+      <EditIcon/>
+  </FlipDivStyle>
+</ExpandableBoxStyled>
+
+const FlipDivStyle = styled.div.attrs({className: 'expandable-flip-div'})`position: relative;`
+
+const FlipDiv = ({useAnimation, animation, animationTiming, overflowEffect, ...props}) => {
+  const ref = useRef()
+  useAnimation(ref,null,null,{switchAnimation:animation,timing:animationTiming,effect:overflowEffect})
+  return <FlipDivStyle {...props} ref={ref}/>
+}

package/src/Field.jsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components'
+import React from 'react'
+import {getMargin, customTheme} from '@startlibs/utils'
+
+
+const Mandatory = styled.span`
+  color: #c3282d;
+  margin-left: 1px;
+  vertical-align: top;
+  line-height: 100%;
+  margin-top: -1px;
+  ${props => typeof props.mandatory === 'string' && `color: ${props.mandatory};`}
+`
+const Container = styled.div`
+  position: relative;
+  margin-bottom: ${props => getMargin(props.theme.Field.margins)(props)};
+  text-align: left;
+`
+const Label = styled.label`
+  font-weight: 550;
+  display: inline-block;
+  font-size: ${props => props.labelFontSize ? props.labelFontSize : '15'}px;
+  margin-bottom: .75rem;
+  ${props => props.isOnImage && 'color: #fff;'}
+  ${customTheme("FieldLabel")}
+`
+
+export const HelpText = styled.span`
+  color: rgba(0,0,0,0.4);
+  font-weight: 400;
+`
+export const FieldDescription = styled.span`
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  margin: 0.25rem 0 0;
+  font-weight: 400;
+`
+export const BellowFieldDescription = styled(FieldDescription)`
+  margin: 0.5rem 0 0;
+`
+
+export const Field = React.forwardRef((
+  {
+    label,
+    helpText,
+    descText,
+    bellowDescText,
+    className,
+    labelClick,
+    focused,
+    mandatory,
+    onImage,
+    children,
+    labelFontSize,
+    ...rest
+  }, ref) =>
+  <Container ref={ref} {...rest} className={className}>
+    {
+      label &&
+      <Label {...rest} onClick={labelClick} labelFontSize={labelFontSize}>
+        {label}{mandatory && <Mandatory mandatory={mandatory}>*</Mandatory>}
+        {helpText && <HelpText> {helpText}</HelpText>}
+        {descText && <FieldDescription>{descText}</FieldDescription>}
+      </Label>
+    }
+    {children}
+    {bellowDescText && <BellowFieldDescription>{bellowDescText}</BellowFieldDescription>}
+  </Container>
+)
+
+Field.Label = Label
+Field.Container = Container
+Field.HelpText = HelpText
+Field.Description = FieldDescription
+Field.displayName = "Field"

package/src/FieldBox.jsx

@@ -0,0 +1,136 @@
+import React from 'react'
+import {darken} from 'polished'
+import styled, {css} from 'styled-components'
+import {media, callIfFunction, constrainEvent} from '@startlibs/utils';
+import {Icon, TextButton} from '@startlibs/components'
+import {getColor } from '@startlibs/utils';
+import {usePopupToggle } from '@startlibs/core';
+import {HelpText} from './Field'
+
+export const FieldBoxIcon = styled(Icon)`
+  font-size: 25px;
+  width: 25px;
+  text-align: center;
+  margin-right: 1rem;
+`
+export const FieldBoxAction = styled.div`
+  margin-left: auto;
+  color: ${getColor('main')};
+  padding-left: 1rem;
+  font-size: 13px;
+  font-weight: 500;
+`
+  
+export const FieldBoxHelpText = styled.span`
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+`
+
+const FieldBoxContent = styled.div`
+  margin-right: auto;
+  min-width: 0;
+`
+
+const DeleteButton = styled(Icon).attrs({icon: 'x'})`
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  font-size: 18px;
+  margin-left: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  color: ${getColor('gray120')};
+  background-color: rgba(0,0,0,0.08);
+  flex-shrink: 0;
+  :hover {
+    background: rgba(0,0,0,0.11);
+  }
+  :active {
+    background: rgba(0,0,0,0.13);
+  }
+`
+const DropdownButton = styled(Icon).attrs({icon: 'arrow-down'})`
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  border-radius: 50%;
+  display: inline-block;
+  font-size: 14px;
+  margin-left: 0.75rem;
+  text-align: center;
+  cursor: pointer;
+  color: ${getColor('gray120')};
+  background-color: rgba(0,0,0,0.08);
+  flex-shrink: 0;
+  position: relative;
+  :hover {
+    background: rgba(0,0,0,0.11);
+  }
+  :active {
+    background: rgba(0,0,0,0.13);
+  }
+`
+
+const DescText = styled.div `
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  margin-top: 0.25rem;
+`
+
+
+export const FieldBox = styled(({className,label,helpText,descText,actionLabel,rightContainer,onClick,icon,remove,children,dropDownMenu,...props}) => {
+  const menuToggle = usePopupToggle()
+  return <div className={className} onClick={onClick} {...props}>
+    {icon && <FieldBoxIcon icon={icon}/>}
+    <FieldBoxContent>
+        {label}{helpText && <HelpText> {helpText}</HelpText>}
+        {descText && <DescText>{descText}</DescText>}
+      {children}
+    </FieldBoxContent>
+    {actionLabel && <TextButton>{actionLabel}</TextButton>}
+    {rightContainer && <div className="rightContainer">{rightContainer}</div>}
+    {remove && <DeleteButton onClick={constrainEvent(remove)}/>}
+    {
+      dropDownMenu && <DropdownButton onClick={constrainEvent(menuToggle.toggle)}>
+        {menuToggle.isOpen && callIfFunction(dropDownMenu)}
+      </DropdownButton>
+    }
+  </div>
+})`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  background: ${getColor('lightBluishGray')};
+  border-radius: 8px;
+  min-height: 42px;
+  padding: 1rem 1.25rem;
+  align-items: center;
+  font-size: 14px;
+  color: ${getColor('gray60')};
+  position: relative;
+  transition: border-radius 0.5s ease;
+  ${props => props.onClick && css`
+    cursor: pointer;
+    :hover {
+      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
+    }
+    :active {
+      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
+      transition: none;
+    }
+  `}
+  & ~ & {
+   margin-top: 0.75rem;
+  }
+  ${media.mobile`
+    min-height: 54px;
+    font-size: 15px !important;
+  `}
+  ${TextButton}, .rightContainer {
+    margin-left: 1rem;
+  }
+`

package/src/Form.jsx

@@ -0,0 +1,291 @@
+import React, {useState, useMemo, useImperativeHandle, useContext, forwardRef} from 'react'
+import {useConsumerCatalog, useRefState, willUseSpreadState, useToggle, useIsUnmounted, StartlibsContext} from '@startlibs/core'
+import {ifUndefined, _s, callIfFunction} from '@startlibs/utils'
+import {useProvideErrors} from './Errors'
+import {useDraftConfirmation} from './useDraftConfirmation'
+import _ from 'lodash/fp'
+
+export const getFormResponse = (setter, path = []) => (_, v) => setter(_s.get(path, v))
+export const getFormValues = (setter, path = []) => (values) => setter(_s.get(path, values))
+
+export const FormContext = React.createContext({})
+export const ComponentMetaContext = React.createContext({})
+
+const mergeMetas = (metas) => metas.reduce((acc, meta) => ({...acc, ...meta.props}), {})
+
+const identityValidation = (props, meta) => ({success: props, meta: meta})
+
+const [useProvideValues, useSpreadValue, FormValueContext] = willUseSpreadState()
+const [useProvideMeta, useMeta] = willUseSpreadState()
+
+export const useFormValue = useSpreadValue
+export const useFormValueRef = () => {
+  const [get, set] = useContext(FormValueContext)
+  return [get, set]
+}
+export const useFormMeta = useMeta
+
+export const useForm =
+  ({
+     action,
+     alwaysSave = false,
+     skipDom = false,
+     values: initialValues = {},
+     meta = {},
+     transform = (v) => v,
+     preValidation = () => false,
+     loadingBeforeValidate,
+     onSuccess = () => {},
+     onFailure = () => {},
+     onNonPreValidation,
+     onChange,
+     autoComplete
+   }, ref) => {
+    const outerConfig = {onSuccess, onFailure, transform, preValidation, alwaysSave, action}
+    const currentInitialValues = useRefState(initialValues)
+    currentInitialValues.set(initialValues)
+    const startlibs = useContext(StartlibsContext)
+    const [hasChanged, setHasChangedValue] = useState(false)
+    const hasChangedRef = useRefState(false)
+    const shouldResubmitForm = useToggle(false, (next, prev) => prev && !next && errorsUtils.removeErrorPath('_shouldResubmitForm'))
+    const resubmittingForm = useRefState(false)
+    const loading = useToggle()
+    const isUnmounted = useIsUnmounted()
+    const [ErrorsProvider, errorsContext, errorsUtils] = useProvideErrors()
+    const [registeredComponentMetas, componentMetasManager] = useConsumerCatalog()
+
+    const [confirmDraftContent, draftToggle, draftConfirmation] = useDraftConfirmation(() => submitForm(undefined, {isConfirming: true}))
+
+    const handleValuesChange = (prev, next) => {
+      if (!hasChangedRef.get()) {
+        setHasChanged(true)
+      }
+      callIfFunction(onChange, prev, next, utils)
+    }
+
+    const setHasChanged = (v) => {
+      shouldResubmitForm.close()
+      if (v !== hasChangedRef.get()) {
+        draftToggle.openWith(v)
+        setHasChangedValue(v)
+        hasChangedRef.set(v)
+      }
+    }
+
+    const [ValuesProvider, valuesManager, [getValues, setValues]] = useProvideValues(initialValues, handleValuesChange)
+    const [MetaProvider, metaManager, [getMeta, setMeta]] = useProvideMeta(callIfFunction(meta,initialValues), (prev, next) => {
+      if (prev.submittingFiles !== 0 && next.submittingFiles === 0) {
+        if (resubmittingForm.get()) {
+          if (shouldResubmitForm.get()) {
+            resubmittingForm.get().confirm()
+          } else {
+            resubmittingForm.get().cancel()
+          }
+          resubmittingForm.set(false)
+        }
+      }
+    })
+
+    const validate = async (values = getValues(), validation = preValidation) => {
+      const errors = await callIfFunction(validation, values, utils)
+      if (errors) {
+        errorsUtils.setErrors(errors)
+      }
+      return errors
+    }
+
+    const verifyImagesAndSubmitForm = (values) => {
+      if (values && getMeta('submittedFiles')) {
+        const valuesWithUploadedImages = getMeta('submittedFiles').reduce((acc, {path, file, image}) => {
+          if (_s.get(path, acc) === file) {
+            return _s.set(path, image, acc)
+          } else {
+            return acc
+          }
+        }, values)
+        return submitForm(valuesWithUploadedImages)
+      } else {
+        return submitForm(values)
+      }
+    }
+
+    const submitForm = async (optValues, config = {}) => {
+      if (loading.get()) {
+        return new Promise(() => {})
+      }
+      const values = ifUndefined(callIfFunction(optValues,getValues()), getValues())
+      if (getMeta('submittingFiles')) {
+        shouldResubmitForm.open()
+        errorsUtils.setError('_shouldResubmitForm', startlibs.FormUploadingFileError || startlibs.FormUploadingImageError)
+        if (config.isConfirming) {
+          return Promise.reject()
+        }
+        return new Promise((resolve, reject) => {
+          resubmittingForm.set({
+            confirm: () => resolve(verifyImagesAndSubmitForm(values)),
+            cancel: () => reject()
+          })
+        })
+      }
+      const {onSuccess, onFailure, transform, alwaysSave, preValidation, action} = {...outerConfig, ...config}
+
+      if (preValidation && loadingBeforeValidate) {
+        loading.open()
+      }
+      const errors = await validate(values, preValidation)
+      if (errors) {
+        loading.close()
+        callIfFunction(onNonPreValidation,values,errors)
+        throw {unvalidated: errors}
+      }
+      const request = await transform(values,{meta:getMeta()})
+      if (!request) {
+        loading.close()
+        return {untransformed: true}
+      } else {
+        loading.open()
+        errorsUtils.clearErrors()
+        if (!alwaysSave && !hasChangedRef.get() && (!values || values === getValues())) {
+          await onSuccess(request)
+          if (!isUnmounted()) {
+            loading.close()
+          }
+          return {unrequested: request}
+        }
+        try {
+          const response = await action(request)
+          await onSuccess(request, response)
+          if (!isUnmounted()) {
+            setHasChanged(false)
+            loading.close()
+          }
+          return {request, response}
+        } catch (rejection) {
+          if (_.get([0,'errors'],rejection)) {
+            errorsUtils.setErrors(rejection[0].errors)
+          }
+          try {
+            await onFailure(request, rejection, utils)
+          } catch (e) {
+            console.log(e)
+          }
+          if (!isUnmounted()) {
+            loading.close()
+          }
+          throw {request, rejection}
+        }
+      }
+    }
+
+    const willSubmitForm = (e) => {
+      if (e) {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+      return submitForm()
+    }
+
+    const inputs = [loading, hasChanged, errorsContext, initialValues, transform, preValidation, onSuccess, onFailure, alwaysSave, action, shouldResubmitForm]
+
+    const utils = useMemo(() => ({
+        setValue: (path, value, hasChanged = true) => {
+          setValues(_.isFunction(value) ? _.update(path, value) : _.set(path, value), path, hasChanged ? null : {ignoreCallback: true})
+        },
+        setValues: (valuesSetter, hasChanged = true) => {
+          setValues(valuesSetter, undefined, hasChanged ? null : {ignoreCallback: true})
+        },
+        resetForm: () => {
+          setValues(ifUndefined(currentInitialValues.get(), {}))
+          setHasChanged(false)
+        },
+        resetField: (path) => {
+          const initialValue = _s.get(path, currentInitialValues.get())
+          if (initialValue !== getValues(path)) {
+            setValues(_s.set(path, initialValue))
+          }
+        },
+        getOriginalValues: () => currentInitialValues.get(),
+        getOriginalValue: (path) => _s.get(path, currentInitialValues.get()),
+        getValues,
+        getValue: getValues,
+        getTransformedValues: () => transform(getValues()),
+        setHasChanged,
+        setMeta,
+        getMeta,
+        confirm: draftConfirmation,
+        validate: (props, validation) => !validate(props, validation),
+        submitForm,
+        willSubmitForm,
+        isLoading: loading.isOpen || shouldResubmitForm.isOpen,
+        hasChanged,
+        getHasChanged: () => hasChangedRef.get(),
+        ...errorsUtils
+      }),
+      inputs
+    )
+
+    useImperativeHandle(ref, () => utils, inputs)
+
+    return [
+      (children) => <FormContext.Provider value={utils}>
+        <ComponentMetaContext.Provider value={componentMetasManager}>
+          <ValuesProvider value={valuesManager}>
+            <MetaProvider value={metaManager}>
+              <ErrorsProvider value={errorsContext}>
+                {
+                  !skipDom
+                  ? <form autoComplete={autoComplete} noValidate onSubmit={willSubmitForm}>{callIfFunction(children, utils)}</form>
+                  : callIfFunction(children, utils)
+                }
+              </ErrorsProvider>
+            </MetaProvider>
+          </ValuesProvider>
+        </ComponentMetaContext.Provider>
+        {confirmDraftContent}
+      </FormContext.Provider>,
+      utils
+    ]
+  }
+
+export const WithForm = forwardRef((
+  {
+    children,
+    ...rest
+  },
+  ref) => {
+  return useForm(rest, ref)[0](children)
+})
+
+export const Form = ({transform, preValidation, onSuccess, onFailure, children}) => {
+  const form = useContext(FormContext)
+  const onSubmit = (e) => {
+    if (e) e.preventDefault()
+    return form.submitForm(
+      undefined,
+      undefined,
+      {transform, preValidation, onSuccess, onFailure}
+    )
+  }
+
+  return typeof children === 'function' ?
+         children(onSubmit) :
+         <form noValidate onSubmit={onSubmit}>
+           {children}
+         </form>
+}
+
+const passProps = (action, props) => action(props)
+
+export const withForm = (Component) =>
+  React.forwardRef((props, ref) =>
+    <WithForm {...props}>
+      {form => <Component form={form} {...props} ref={ref}/>}
+    </WithForm>
+  )
+
+export const withForm2 = () => (Component) =>
+  React.forwardRef((props, ref) =>
+    <WithForm {...props} >
+      {form => <Component form={form} {...props} ref={ref}/>}
+    </WithForm>
+  )