@startlibs/form 1.0.11 → 1.1.0

package/src/alt/checkbox/ToggleCheckbox.jsx

@@ -0,0 +1,143 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Checkbox} from '../../Checkbox'
+import {HelpText} from '../../Field'
+import {customTheme, getColor} from '@startlibs/utils'
+import {darken} from 'polished';
+import { TransitionDiv } from '@startlibs/components';
+const ToggleContainer = styled.div `
+`
+
+const Toggle = styled.div `
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-left: 1rem;
+  float: right;
+  transition: 0.25s ease;
+  width: 2.75rem;
+  height: 18px;
+  border-radius: 18px;
+  background: ${props => props.checked ? getColor('main') : 'rgba(0,0,0,0.14)'};
+  display: inline-block;
+  position: relative;
+  font-weight: 600;
+  :after {
+    content: '';
+    transition: 0.25s ease;
+    border-radius: 50%;
+    display: block;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 14px;
+    height: 14px;
+    background: white;
+    ${props => props.checked ? css`
+      margin-left: -2px;
+      left: 100%;
+      transform: translate(-100%,-50%);
+      ` : css`
+      margin-left: 2px;
+      left: 0;
+    `}
+  }
+  ${customTheme('ToggleCheckbox')}
+`
+const ToggleLabel = styled.div `
+  flex-basis: 0;
+  flex-grow: 1;
+  display: inline-block;
+  font-size: 15px;
+`
+const DescText = styled.div `
+  font-weight: 400;
+  color: rgba(0,0,0,0.4);
+  font-size: 12px;
+  margin-top: 0.25rem;
+`
+const ToggleCheckboxStyled = styled(Checkbox)`
+  position:relative;
+  border-radius: 8px;
+  padding: 1rem;
+  min-height: 42px;
+  font-weight: 550;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between; 
+  transition: background 0.2s linear;
+  & ~ & {
+    margin-top: -1rem;
+  }
+  ${props => props.margin ? css`
+    margin-bottom: ${props => props.margin}px;
+  `: css`
+    margin-bottom: 1.5rem;
+    & ~ & {
+      margin-top: -1rem;
+    }
+  `}
+  ${props => props.gray ? `
+    background-color: rgba(0,0,0,0.06);
+    :hover {
+      background-color: rgba(0,0,0,0.08);
+    }
+    :active {
+      background-color: rgba(0,0,0,0.1);
+      transition: none;
+    }
+  `:css`
+    background-color: ${getColor('lightBluishGray')};
+    :hover {
+      background: ${props => darken(0.035, getColor('lightBluishGray')(props))};
+    }
+    :active {
+      background: ${props => darken(0.05, getColor('lightBluishGray')(props))};
+      transition: none;
+    }
+  `}
+  ${props => !props.noFocus && css`
+    :focus-within {
+      background-color: rgba(0,0,0,0.09);
+      :after{
+        content: '';
+        pointer-events: none;
+        position: absolute;
+        top: -3px;
+        right: -3px;
+        left: -3px;
+        bottom: -3px;
+        border-radius: 9px;
+        border: 2px solid rgba(0, 0, 0, 0.15);
+      }
+    }
+  `}
+  ${props => props.disabled && `
+    opacity: 0.8;
+    pointer-events:none;
+  `}
+  ${customTheme('ToggleCheckboxBox')}
+`
+
+export const ToggleCheckbox = styled(({path, disabled, rightInfo, label, descText, helpText, tabIndex,noFocus, margin, className,...rest}) =>
+  <ToggleCheckboxStyled
+    path={path}
+    tabIndex={tabIndex}
+    disabled={disabled}
+    noFocus={noFocus}
+    className={className}
+    margin={margin}
+    {...rest}
+  >{({disabled, checked, hasErrors, focused}) =>
+    <>
+      <ToggleLabel>
+        {label}{helpText && <HelpText> {helpText}</HelpText>}
+        <TransitionDiv block>{descText && <DescText>{descText}</DescText>}</TransitionDiv>
+      </ToggleLabel>
+      {rightInfo}
+      <Toggle checked={checked}/>
+    </>
+  }
+  </ToggleCheckboxStyled>
+)`
+`

package/src/alt/radiobox/CleanTabRadiobox.jsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {getColor, customTheme} from '@startlibs/utils'
+import {Radiobox} from '../../Radiobox'
+
+export const Tab = styled.div`
+  width:100%;
+  font-size: 16px;
+  color: ${getColor("gray120")};
+  font-weight: 500;
+  margin-left: 0;  
+  padding: 12px 2.5rem;
+  flex-grow: 1;
+  height: 100%;
+  border-bottom: 1px solid ${getColor("gray210")};
+  position: relative;
+  ${props => props.checked ? css`
+    color: ${getColor("main")};
+    :after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: 3px;
+      background: ${getColor("main")};
+      border-radius: 10px;
+    }
+  `: css`
+    cursor: pointer;
+    :hover {
+      color: ${getColor("gray90")};
+    }
+  `}
+  ${customTheme('CleanTabButton')}
+`
+
+const InnerButton = styled.a``
+
+export const CleanTabRadiobox = styled(({label, white,icon,...props}) =>
+  <Radiobox {...props}>{({disabled, checked, hasErrors, focused}) =>
+    <Tab innerAs={InnerButton} tabIndex={-1} focused={focused} checked={checked} disabled={disabled}>{label}</Tab>
+  }</Radiobox>
+)`
+  display: inline-block;
+`

package/src/alt/radiobox/IconRadioBox.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Icon} from '@startlibs/components'
+import {customTheme, getColor} from '@startlibs/utils'
+import {Radiobox} from '../../Radiobox'
+import {lighten, desaturate} from 'polished'
+
+export const IconRadioBoxText = styled.div`
+  flex-grow: 1;
+  padding: 0 0.5rem 0.5rem;
+  min-height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 12px;
+  color: ${getColor('gray120')};
+  ${props => props.checked && css`
+    color: ${getColor('main')};
+  `}
+  ${props => props.highlightedDesc && css`
+    background: ${getColor('gray240')};
+    padding: 0.25rem 0.5rem;
+    min-height: 3rem;
+    ${props => props.checked && css`
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+    `}
+  `}
+`
+
+export const IconRadioBoxIconContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+`
+
+const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  border-radius: 8px;
+  background-color: white;
+  border: 1px solid ${getColor('gray210')};
+  overflow: hidden;
+  color: ${getColor('gray150')};
+
+  ${Icon} {
+    font-size: 100px;
+    line-height: 50px;
+    line-height: 76px;
+    width: 100%;
+  }
+
+  ${props => props.checked && css`
+    color: ${getColor('main')};
+    border-color: ${getColor('main')};
+  `}
+
+  input {
+    opacity: 0;
+    position: absolute;
+    left: -20000000px;
+  }
+
+  ${props => props.focused && `
+    ${IconRadioBoxIconContainer}::after {
+      content: '';
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      left: -4px;
+      bottom: -4px;
+      border-radius: 10px;
+      border: 3px solid rgba(0, 0, 0, 0.15);
+  }`}
+
+  ${customTheme("IconRadioBox")}
+`
+
+
+export const IconRadioBox = styled(({icon, label, highlightedDesc,...props}) =>
+  <Radiobox {...props}>{({checked, focused, hasErrors, disabled}) =>
+    <Wrapper checked={checked} focused={focused}>
+      <IconRadioBoxIconContainer><Icon icon={icon}/></IconRadioBoxIconContainer>
+      {checked}
+      <IconRadioBoxText highlightedDesc={highlightedDesc} checked={checked}>
+        {label}
+      </IconRadioBoxText>
+    </Wrapper>
+  }</Radiobox>
+)`outline: none;`

package/src/alt/radiobox/SimpleRadiobox.jsx

@@ -0,0 +1,153 @@
+import React from 'react'
+
+import { getColor, ifProp, media } from '@startlibs/utils';
+import styled, {css} from 'styled-components'
+import {lighten, desaturate} from 'polished'
+import {HelpText} from '../../Field'
+import {Radiobox} from '../../Radiobox'
+
+const CssCircle = styled.div`
+  border-radius: 50%;
+  content: '';
+  border: 1px solid ${getColor('gray210')};
+  width: 18px;
+  height: 18px;
+  background-color: white;
+  position: absolute;
+  left: -2rem;
+  top: 50%;
+  transform: translateY(-50%);
+  
+  ${ifProp('focused', css`
+    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+    border-color: ${getColor('gray180')};
+  `)}
+
+  ${ifProp('checked', css`
+    :before { 
+      content: '';
+      width: 8px;
+      height: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      left: 4px;
+      border-radius: 50%;
+      position: absolute;
+      background-color: ${getColor('gray90')};
+    }
+  `)}
+  
+`
+const TextLabel = styled.span `
+  font-size: 13px;
+  line-height: 16px;
+  margin: 2px 0.25rem 2px 0;
+  display: block;
+`
+const DescText = styled.div `
+  color: rgba(0,0,0,0.4);
+  display: block;
+  font-size: 12px;
+  font-weight: 400;
+`
+const TextLabelContainer = styled.div `
+  display: flex;
+  align-items: center;
+  position: relative;
+  flex-wrap: wrap;
+`
+const RadioboxContent = styled.div `
+  cursor: pointer;
+  position: relative;
+  padding-left: 2rem;
+  transition: background 0.2s linear;
+  ${props => props.framed && css`
+    border: 1px solid ${getColor('gray210')};
+    border-radius: 8px;
+    min-height: 3rem;
+    min-width: 8rem;
+    background: white;
+    width: 100%;
+    align-items: center;
+    display: flex;
+    :hover {
+      background: rgb(245,245,245);
+    }
+    :active {
+      background: rgb(235,235,235);
+      transition: none;
+    }
+    padding: 10px 12px 10px 32px;
+    ${media.desktop`
+      padding: 7px 12px 7px 32px;
+    `}
+    ${props => props.hasErrors && css`
+      border-color: ${getColor('alert')} !important;
+    `}
+    ${props => props.checked && props.highlightSelected && css`
+      border-color: ${getColor('main')};
+      background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      :hover {
+        background: ${props => desaturate(0.3, lighten(0.52, getColor("main")(props)))};
+      }
+      ${CssCircle} {
+        :before { 
+          background-color: ${getColor('main')};
+        }
+      }
+    `}
+    ${props => props.checked && props.ultraHighlightSelected && css`
+      border-color: ${getColor('main')};
+      background: ${getColor('main')};
+      color: white;
+      :hover {
+        background: ${getColor('main')};
+      }
+      ${CssCircle} {
+        :before { 
+          background-color: ${getColor('main')};
+        }
+      }
+      ${HelpText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+      ${DescText} {
+        color: rgba(255, 255, 255, 0.65);
+      }
+    `}
+    ${props => props.disabled && css`
+      background-color: rgba(0,0,0,0.075) !important;
+      &[disabled] {
+        opacity: 0.75 !important;
+      }
+      ${CssCircle} {
+        background: rgba(255,255,255,0.25);
+      }
+    `}
+  `}
+`
+
+export const SimpleRadiobox = styled((props) =>
+  <Radiobox {...props}>{({disabled, checked, hasErrors, focused, tabIndex, framedBoxes, highlightSelected, ultraHighlightSelected}) =>
+    <RadioboxContent checked={checked} framed={props.framedBoxes} highlightSelected={props.highlightSelected} ultraHighlightSelected={props.ultraHighlightSelected} hasErrors={hasErrors} disabled={disabled}>
+      <div className="textContainer">
+        <TextLabelContainer>
+          <CssCircle checked={checked} focused={focused} tabIndex={tabIndex}/>
+          <TextLabel>{props.label}</TextLabel>{props.helpText && <HelpText> {props.helpText}</HelpText>}
+        </TextLabelContainer>
+        {props.descText && <DescText>{props.descText}</DescText>}
+      </div>
+    </RadioboxContent>
+  }</Radiobox>
+)`
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 1rem;
+  display: flex;
+  ${ifProp('disabled', css`
+    pointer-events: none;
+  `)}
+  .textContainer {
+    width: 100%;
+  }
+`

package/src/alt/radiobox/TabRadiobox.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import styled, {css} from 'styled-components'
+import {Button} from '@startlibs/components'
+import {ifProp, getColor, media, customTheme} from '@startlibs/utils'
+import {Radiobox} from '../../Radiobox'
+import {lighten, desaturate} from 'polished'
+
+export const TabButton = styled(Button)`
+  width:100%;
+  margin-left: 0;  
+  padding: 9px 1rem;
+  flex-grow: 1;
+  background: ${props => props.white ? 'white' : getColor('gray240')};
+  box-shadow: none;
+  color: ${getColor('gray120')};
+  border: 1px solid ${getColor('gray210')};
+  border-left-width: 0;
+  height: 100%;
+  :hover {
+    background: ${props => desaturate(0.6, lighten(0.5, getColor("main")(props)))};
+  }
+  ${ifProp('checked', css`
+    &, &:hover {
+      border-color: ${getColor('main')};
+      background-color: ${getColor('main')};
+      border-left-width: 1px;
+      color: #fff;
+      cursor: default;
+    }
+  `)}
+  
+  ${props => props.isFirst && `
+    border-left-width: 1px;
+  `}
+  ${props => props.isFirst!==undefined && !props.isFirst && `
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    :focus:after{
+      border-bottom-left-radius: 2px;
+      border-top-left-radius: 2px;
+    }
+  `}
+  ${props => props.isLast!==undefined && !props.isLast && `
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    :focus:after{
+      border-bottom-right-radius: 2px;
+      border-top-right-radius: 2px;
+      z-index: 2;
+    }
+  `} 
+  ${media.mobile`
+    min-width: 0;
+    ${props => props.icon ? `
+      padding-left: 1.25rem;
+      padding-right: 1rem;
+    `:`
+      padding-left: 0.25rem;
+      padding-right: 0.25rem;
+    `}
+  `} 
+  ${customTheme('TabButton')}
+`
+
+const InnerButton = styled.a``
+
+export const TabRadiobox = styled(({isLast, isFirst, label, white,icon,...props}) =>
+  <Radiobox {...props}>{({disabled, checked, hasErrors, focused}) =>
+    <TabButton innerAs={InnerButton} tabIndex={-1} focused={focused} isFirst={isFirst} isLast={isLast} checked={checked} disabled={disabled} white={white} icon={icon}>{label}</TabButton>
+  }</Radiobox>
+)`
+  display: inline-block;
+`

package/src/enhanceInput.jsx

@@ -0,0 +1,107 @@
+// @flow
+import React, {useContext, useEffect, useState} from 'react'
+import _ from 'lodash/fp'
+import {_s, callIfFunction, formatPath, ifUndefined} from '@startlibs/utils'
+import {ErrorsContext} from './Errors'
+import {useFormValue} from './Form'
+
+export const PathContext = React.createContext([])
+export const enhancedInputDisplayName = 'EnhancedInput'
+
+const undefinedToDefault = (v, defaultValue) => v === undefined ? defaultValue : v
+const pathToStr = (v) => Array.isArray(v) ? v.join('.') : v
+const skipValidation = () => true
+
+const formInput = ({undefinedPlaceholder, isChecked = _.identity, truthSource = useFormValue, transform = _.identity, validation = skipValidation, onChange, fieldValue, path: propPath}) => {
+  const contextPath = useContext(PathContext)
+  const {paths} = useContext(ErrorsContext)
+  const path = ifUndefined(propPath, contextPath)
+  const formattedPath = formatPath(path)
+  const [formValue, setFormValue] = truthSource(formattedPath)
+
+  const setValue = (value, element) => {
+    const opts = {path,prevValue:formValue,element}
+    if (!validation(value,opts)) { return }
+    const transformedValue = transform(callIfFunction(value,formValue),opts)
+    setFormValue(transformedValue)
+    callIfFunction(onChange, transformedValue, opts)
+  }
+
+  const setValueFromEventTarget = (e) => setValue(e.currentTarget.value, e.currentTarget)
+
+  const setFromField = () => setValue(fieldValue)
+
+  const toggle = () => setValue(!isChecked(formValue) ? (fieldValue || true) : (!!fieldValue && undefined))
+
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue))
+
+
+  return [ifUndefined(formValue,undefinedPlaceholder), setValue, {
+    hasErrors:paths.has(formattedPath),
+    setFromField,
+    toggle,
+    toggleItem,
+    name:formattedPath,
+    setValueFromEventTarget
+  }]
+
+}
+
+const rawInput = ({value, path, isChecked = _.identity, name, setValue: setValueProp, validation = skipValidation, transform = _.identity, onChange, fieldValue, defaultValue}) => {
+  const [rawValue, setRawValue] = useState(ifUndefined(value,defaultValue))
+  const errorUtils = useContext(ErrorsContext)
+  const formattedPath = formatPath(path)
+
+  useEffect(() => {
+    setRawValue(value)
+  }, [value])
+
+  const setValue = (value, element) => {
+    if (!validation(value,{prevValue:rawValue})) { return }
+    const transformedValue = transform(value)
+    setValueProp(
+      transformedValue,
+      element
+    )
+    callIfFunction(onChange, transformedValue, rawValue, {element})
+  }
+
+  const setValueFromEventTarget = (e) => setValue(e.currentTarget.value, e.currentTarget)
+
+  const setFromField = () => setValue(fieldValue)
+
+  const toggle = () => setValue(!isChecked(rawValue))
+
+  const toggleItem = () => setValue(_s.itemToggle(fieldValue))
+
+  return [value, setValue, {
+    hasErrors:errorUtils?.paths?.has(formattedPath),
+    setFromField,
+    name,
+    toggle,
+    toggleItem,
+    setValueFromEventTarget
+  }]
+
+}
+
+export const useInput = (props,raw) => {
+  const [isRaw] = useState(raw)
+  return isRaw ? rawInput(props) : formInput(props)
+}
+
+export const EnhanceInput = ({raw,...props}) => {
+  const [value,setValue,utils] = useInput(props,raw)
+  return props.children({
+    path:props.path,
+    value,
+    setValue,
+    ...utils
+  })
+}
+
+export const enhanceInput = (InputComponent) => React.forwardRef(({...props}, ref) =>
+  <EnhanceInput {...props}>{(formInput) =>
+    <InputComponent {...props} ref={ref} formInput={formInput}/>
+  }</EnhanceInput>
+)

package/src/index.js

@@ -0,0 +1,27 @@
+export * from './Form'
+export * from './enhanceInput'
+export * from './Field'
+export * from './FieldBox'
+export * from './useConfirmDialog'
+export * from './TextInput'
+export * from './Errors'
+export * from './withFormImageInput'
+export * from './Checkbox'
+export * from './Combobox'
+export * from './ComboboxWithCustom'
+export * from './AutoComplete'
+export * from './EditableBox'
+export * from './FormValue'
+export * from './Radiobox'
+export * from './InputboxGroup'
+export * from './DatePicker'
+export * from './ExpandableBox'
+export * from './RichText'
+export * from './alt/radiobox/IconRadioBox'
+export * from './alt/checkbox/SimpleCheckbox'
+export * from './alt/checkbox/ToggleCheckbox'
+export * from './alt/radiobox/TabRadiobox'
+export * from './alt/radiobox/CleanTabRadiobox'
+export * from './alt/radiobox/SimpleRadiobox'
+export * from './useDraftConfirmation'
+export {validation} from './validation'