How to use former-kit - 10 common examples

import React from 'react'
import PropTypes from 'prop-types'
import {
  Grid,
  Row,
  Col,
  ThemeConsumer,
} from 'former-kit'

import SadEmoji from './../images/sad.svg'

const consumeTheme = ThemeConsumer('UIErrorPage')

const ErrorPage = ({ theme }) => (

omit,
  pipe,
  prop,
  propOr,
} from 'ramda'
import { ThemeConsumer } from 'former-kit'

import { toggleCart } from '../../redux/actions'
import { formatToBRL } from '../../utils/masks/'
import { Button } from '../'

import CartIcon from '../../images/cart.svg'
import CloseIcon from '../../images/clear-close.svg'
import NavigateBack from '../../images/navigate_back.svg'

const consumeTheme = ThemeConsumer('UICart')

const formatShippingFee = ifElse(
  equals(0),
  always('Gratis!'),
  formatToBRL
)

const formatZipcode = pipe(
  insert(5, '-'),
  join('')
)

const hasShippingAddress = anyPass([
  prop('street'),
  prop('number'),
  prop('additionalInfo'),

import CreditCardForm from './CreditCardForm'
import BoletoForm from './BoletoForm'

import {
  required,
  minLength,
  maxLength,
  isValidDate,
} from '../../utils/validations'
import updateMultipleAmount from '../../utils/helpers/updateMultipleAmount'
import { formatToBRL } from './../../utils/masks/'
import getInstallments from './../../utils/helpers/getInstallments'
import getInputAmountValue from './../../utils/helpers/getInputAmountValue'

const consumeTheme = ThemeConsumer('UIPaymentPage')

const defaultColSize = 12
const mediumColSize = 6

class CreditCardAndBoleto extends Component {
  state = {
    formData: {},
    formValid: false,
    inputAmountNames: {
      first: 'creditcard-amount',
      second: 'boleto-amount',
    },
  }

  handleChangeForm = (newFormData, errors) => {
    const { formData, inputAmountNames } = this.state

import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import {
  Grid,
  Row,
  Col,
  ThemeConsumer,
} from 'former-kit'

const consumeTheme = ThemeConsumer('UILoadingInfo')

const defaultColSize = 12

const LoadingInfo = ({
  theme,
  title,
  subtitle,
  fullscreen,
}) => (

addPageInfo,
  incrementFinalAmount,
  decrementFinalAmount,
  resetFinalAmount,
} from '../../actions'
import {
  required,
  minLength,
  maxLength,
  isValidDate,
} from '../../utils/validations'

import getInstallments from './../../utils/helpers/getInstallments'
import { applyDiscount } from './../../utils/calculations'

const consumeTheme = ThemeConsumer('UIPaymentPage')

const setPaymentMethod = ({
  defaultMethod,
  paymentConfig,
}) => defaultMethod || keys(paymentConfig)[0]

const createSwitchItems = ({
  theme,
  base,
  transaction,
  amount,
  isBigScreen,
  flipped,
  formData,
  handleFlipCard,
  paymentType,

import { connect } from 'react-redux'
import {
  Grid,
  Row,
  Col,
  ThemeConsumer,
} from 'former-kit'

import EmailForm from '../../containers/EmailForm'
import ActionList from '../ActionList'

import { formatToBRL } from '../../utils/masks/'

import successIcon from '../../images/success-icon.png'

const consumeTheme = ThemeConsumer('UISuccessInfo')

const iconColSize = 4
const contentColSize = 8
const defaultColSize = 12
const mediumColSize = 6

const handleCopyBarCode = (barcode) => {
  ReactGA.event({
    category: 'Boleto',
    action: 'Copy Bar Code',
  })

  copy(barcode)
}

class SuccessInfo extends React.Component {

import React from 'react'
import PropTypes from 'prop-types'
import {
  Button,
  Row,
  Col,
  ThemeConsumer,
} from 'former-kit'

const consumeTheme = ThemeConsumer('UIActionList')
const defaultColSize = 12

const ActionList = ({ theme, buttons }) => (
  
    {
      buttons.map(buttonInfo => (

import React from 'react'
import { ThemeConsumer } from 'former-kit'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import {
  equals,
  not,
} from 'ramda'
import { ProgressBar } from '..'

import BackIcon from '../../images/navigate_back.svg'
import CloseIcon from '../../images/closeX.svg'

const consumeTheme = ThemeConsumer('UIHeader')

class Header extends React.Component {
  shouldComponentUpdate (nextProps) {
    const oldActiveStep = this.props.activeStep
    const newActiveStep = nextProps.activeStep

    return not(equals(oldActiveStep, newActiveStep))
  }

  render () {
    const {
      activeStep,
      handleCloseButton,
      handlePreviousButton,
      logoAlt,
      logoSrc,

import moment from 'moment'
import { ThemeConsumer } from 'former-kit'
import ReactGA from 'react-ga'
import copy from 'copy-to-clipboard'
import { propOr } from 'ramda'
import classNames from 'classnames'

import { ActionButton, Button } from './../../'
import { formatToBRL } from '../../../utils/masks/'
import SuccessIcon from '../../../images/confirmacao_sucesso.svg'
import CopyIcon from '../../../images/copy.svg'
import DownloadIcon from '../../../images/download.svg'
import CloseXIcon from '../../../images/closeX.svg'
import OrderIcon from '../../../images/pedido.svg'

const consumeTheme = ThemeConsumer('UISuccessMessageInfo')

const openLink = url => window.open(url, '_blank')

const formatExpirationAt = value => (
  value
    ? moment(value).format('L')
    : moment().add(1, 'days').format('L')
)

const handleBarcodeCopy = barcode => (
  () => {
    ReactGA.event({
      category: 'Boleto',
      action: 'Copy Bar Code',
    })

import React from 'react'
import PropTypes from 'prop-types'
import {
  Button,
  ThemeConsumer,
} from 'former-kit'

const consumeTheme = ThemeConsumer('UIDarkButton')

const DarkButton = ({
  icon,
  onClick,
  subtitle,
  theme,
  title,
}) => (
  <div>
    <button>
      <div>
        <p>
          {title}</p></div></button></div>