@crave/farmblocks-hoc-input/lib/formInput.story.utils.js

A High Order Component that adds behaviour of label support, different styles for focus and errors, and validation error messages.

import React from "react";
import styled from "styled-components";
import { space, layout } from "styled-system";
import formInput from "./index";
export const FbInput = formInput(props => /*#__PURE__*/React.createElement("input", props));
export const Container = styled.div.attrs(props => ({
  width: props.width || [1, 1, 1, 1 / 3]
})).withConfig({
  displayName: "formInputstoryutils__Container",
  componentId: "sc-138wlub-0"
})(["", ";", ";"], layout, space); // eslint-disable-next-line

export const WithValue = ({
  children
}) => {
  const [value, setValue] = React.useState();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
    type: "button",
    onClick: () => {
      setValue(Math.random().toString(36).substr(2, 9));
    },
    value: "Click me to change input value"
  }), children(value));
}; // eslint-disable-next-line

export const FocusContainer = ({
  children
}) => {
  const [focused, setFocused] = React.useState();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("input", {
    type: "button",
    onClick: () => {
      setFocused(value => !value);
    },
    value: "Click me to toggle focused style"
  }), children(focused));
};