react-styled-component

const App = () => {
  const [emailVal, setEmailVal ] = useState('');
  const [passwordVal, setPasswordVal ] = useState('');

  const handleChange = (e) => {
    if (e.target.name === 'email') {
      setEmailVal(e.target.value);
      return
    }

    setPasswordVal(e.target.value);
  }


  const inputStyle = {
    appearance: 'none',
    display: 'block',
    verticalAlign: 'middle',
    color: 'white',
    width: '75%',
    maxWidth: '38rem',
    lineHeight: 'inherit',
    letterSpacing: 'inherit',
    fontFamily: 'inherit',
    backgroundColor: 'transparent',
    borderRadius: '5px',
    borderWidth: '1px',
    borderStyle: 'solid',
    borderColor: 'rgb(221, 225, 228)',
    transition: 'box-shadow 0.125s ease-out 0s',
    margin: '0px'
  }

  const inputs = [
    {
      data: { type: 'email', name: 'email', label: 'email', placeholder: 'enter email', required: true },
      fieldStyle: { width: '75%', maxHeight: '5rem', justifyContent: 'space-between', flexDirection: 'column'},
      inputStyle: { ...inputStyle }
    },
    {
      data: { type: 'password', name: 'password', label: 'password', placeholder: 'enter password', required: true },
      fieldStyle: { width: '75%', maxHeight: '5rem', justifyContent: 'space-between', flexDirection: 'column'},
      inputStyle: { ...inputStyle }
    }
  ]

  const buttons = [
    { text: 'Submit', type: 'submit', cb: null, style: 'squareButton' },
    { text: 'Cancel', type: 'cancel', cb: null, style: 'squareButton' }
  ]

  // const form = {
  //   data: { name: 'signinForm', submit: 'signup', cb: signin },
  //   style: { height: 1, justifyContent: 'space-around', flexDirection: 'column', px: 2, fontSizeModule: [1, 2, 3, 4]},
  // }

  return (
    <Box
      fontSize="18px"
      color="black"
      backgroundColor="black"
      height="50vh"
      width="50vh"
      as="form"
    >
      <Field
        data={{ name: 'email', type: 'text', placeholder: 'enter email', label: 'email'}}
        fieldStyle={{ width: '75%', maxHeight: '5rem', justifyContent: 'space-between', flexDirection: 'column'}}
        inputStyle={{...inputStyle}}
        errors={[]}
        value={emailVal}
        onChange={handleChange}
      />
      <Field
        data={{ name: 'password', type: 'password', placeholder: 'enter password', label: 'email'}}
        fieldStyle={{ width: '75%', maxHeight: '5rem', justifyContent: 'space-between', flexDirection: 'column'}}
        inputStyle={{...inputStyle}}
        errors={[]}
        value={passwordVal}
        onChange={handleChange}
      />
    </Box>
  )
}


import styled from "styled-components";
import React, { useState } from 'react'

import Box from './Box';

export const Error = styled(Box).attrs({
  className: 'error',
  color: 'error',
  f: 1,
  ml: 1,
  my: 0
})`
  font-weight: normal;
  &:before { content: '—'; }
`

const handleErrorMessages = errorMessages => {
  return errorMessages.map( errorMessage => <Box as="item" key={errorMessage}><Error>{errorMessage}</Error></Box> )
}

const Field = ({ data: { name, type, placeholder, label }, fieldStyle, inputStyle, ...props }) => {
  const [shown, setShown] = useState(false);
  const errorColor = props.errors.length >= 1 ? '#e95667' : null;
  const {display, ...inputStyleContainer } = inputStyle;
  const {border, borderTop, borderRight, borderBottom, borderLeft, ...inputStyleNoBorder } = inputStyle;

  const inputType =
    {
      select: 'select',
      slider: 'slider',
      textarea: 'textarea'
    }[type] || 'input'

    return (
    <Box display="flex" {...fieldStyle}>
      <Box
        alignItems="flex-end"
      >
        <Box as="label" for={name} id={name}>
          {label}
        </Box>
        {props.errors.length >= 1 ? <Box as="list" ml="2rem" color={errorColor} fontSize="1.2rem">{handleErrorMessages(props.errors)}</Box> : ''}
      </Box>
      <Box
        {...inputStyleContainer}
        display="flex"
        borderColor={errorColor}
        focusColor={errorColor}
        foucsBoxShadowColor={errorColor}
      >
        <Box
          {...props}
          {...inputStyleNoBorder}
          border="none"
          forwardedAs={inputType}
          name={name}
          type={shown && type === "password" ? 'text' : type}
          placeholder={placeholder}
        />
        { type === "password" ?
        <Box
          as="p"
          fontSize="12px"
          m="auto"
          onClick={() => setShown(!shown)}
          caps
          cursor='pointer'
        >
          {shown ? 'hide':'show'}
        </Box> : '' }
      </Box>
    </Box>
  );
};

Field.displayName = 'Field';

export default Field


import React from 'react';
import styled from 'styled-components';
import { color, typography, layout, flexbox,
  grid, background, border, position, shadow } from 'styled-system'
import cleanElement from 'clean-element';
import { filterProps } from './filterProps';

const Base = props => {

  const Div = styled.div``;
  const next = filterProps(props)
  return <Div {...next}/>;
}

const Box = styled(cleanElement(Base))(
  {
    boxSizing: 'border-box',
    minWidth: 0,
  },
  color, typography, layout, flexbox, grid, background, border, position, shadow
);

export default Box;