Input styling changes, Form component addition

.storybook/main.js

@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js', '../src/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-essentials',
     '@storybook/addon-storysource',

src/components/Form.stories.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { action, actions as makeActions } from '@storybook/addon-actions';
+
+import { Form, PureForm, FormProps, PureFormProps } from './Form';
+// @ts-ignore
+import { Button } from './Button';
+// @ts-ignore
+import { Input as UnstyledInput } from './Input';
+
+export default {
+  title: 'Design System/forms/Form',
+  component: Form,
+};
+
+const FormWrapper = styled.div`
+  padding: 3em 12em;
+`;
+
+const Input = styled(UnstyledInput)`
+  padding-bottom: 1em;
+`;
+
+const onSubmit = (e: Event) => {
+  e.preventDefault();
+  action('onClick')(e);
+};
+
+const Submit = () => (
+  <Button appearance="secondary" onClick={onSubmit}>
+    Submit
+  </Button>
+);
+
+const fields = [
+  {
+    id: 'input-1',
+    validationError: (value: string) =>
+      !value && `There is an error with this field with value: "${value}"`,
+    Component: (props: any) => {
+      const [value, setValue] = useState('');
+      return (
+        <Input
+          startFocused
+          appearance="secondary"
+          label="Label"
+          hideLabel
+          value={value}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            action('change')(e.target.value);
+            setValue(e.target.value);
+          }}
+          {...props}
+        />
+      );
+    },
+  },
+  {
+    id: 'input-2',
+    validationError: (value: string) => `There is an error with this field with value: "${value}"`,
+    Component: (props: any) => {
+      const [value, setValue] = useState('prefilled');
+      return (
+        <Input
+          appearance="secondary"
+          label="Label"
+          hideLabel
+          value={value}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            action('change')(e.target.value);
+            setValue(e.target.value);
+          }}
+          {...props}
+        />
+      );
+    },
+  },
+];
+
+export const Default = (args: FormProps) => <Form {...args} />;
+Default.decorators = [(storyFn: any) => <FormWrapper>{storyFn()}</FormWrapper>];
+Default.args = {
+  children: <Submit />,
+  fields,
+};
+
+export const Pure = (args: PureFormProps) => <PureForm {...args} />;
+Pure.decorators = [(storyFn: any) => <FormWrapper>{storyFn()}</FormWrapper>];
+Pure.args = {
+  ...makeActions('onFocus', 'onBlur', 'onMouseEnter', 'onMouseLeave'),
+  primaryFieldId: 'input-1',
+  blurredFieldIds: new Set(),
+  children: <Submit />,
+  fields,
+};
+
+export const PureMultipleErrors = Pure.bind({});
+PureMultipleErrors.decorators = [(storyFn: any) => <FormWrapper>{storyFn()}</FormWrapper>];
+PureMultipleErrors.args = {
+  ...Pure.args,
+  blurredFieldIds: new Set(Pure.args.fields.map((field) => field.id)),
+};

src/components/Form.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+
+interface Field {
+  id: string;
+  validationError: (value: string) => string | void;
+  Component: (props: any) => JSX.Element;
+}
+
+export interface FormProps {
+  fields: [Field?];
+}
+
+export interface PureFormProps extends FormProps {
+  children?: React.ReactChildren;
+  primaryFieldId: string;
+  onMouseEnter: (id: string) => void;
+  onMouseLeave: (id: string) => void;
+  onFocus: (id: string) => void;
+  onBlur: (id: string) => void;
+  blurredFieldIds: Set<string | unknown>;
+}
+
+export const PureForm = ({
+  children,
+  fields = [],
+  onMouseEnter,
+  onMouseLeave,
+  onBlur,
+  onFocus,
+  primaryFieldId,
+  blurredFieldIds,
+  ...rest
+}: PureFormProps) => {
+  return (
+    <form {...rest}>
+      {fields.map(({ id, validationError, Component }: Field) => (
+        <Component
+          key={id}
+          id={id}
+          onMouseEnter={() => onMouseEnter(id)}
+          onMouseLeave={() => onMouseLeave(id)}
+          onFocus={() => onFocus(id)}
+          onBlur={() => onBlur(id)}
+          error={(value: string) => blurredFieldIds.has(id) && validationError(value)}
+          suppressErrorMessage={!primaryFieldId || primaryFieldId !== id}
+        />
+      ))}
+      {children}
+    </form>
+  );
+};
+
+export const Form = (props: FormProps) => {
+  const [focusedFieldId, setFocusedFieldId] = useState(undefined);
+  const [hoveredFieldId, setHoveredFieldId] = useState(undefined);
+  // The primary field is the field that's visual cues take precedence over any
+  // others given the entire form's focused & hover states.
+  // Use this to control things like error messaging priority.
+  const [primaryFieldId, setPrimaryFieldId] = useState(undefined);
+  const [blurredFieldIds, setBlurredFieldIds] = useState(new Set());
+
+  useEffect(() => {
+    if (hoveredFieldId) setPrimaryFieldId(hoveredFieldId);
+    else if (focusedFieldId) setPrimaryFieldId(focusedFieldId);
+    else setPrimaryFieldId(undefined);
+  }, [focusedFieldId, hoveredFieldId, setPrimaryFieldId]);
+
+  return (
+    <PureForm
+      {...props}
+      {...{
+        blurredFieldIds,
+        onFocus: (id) => setFocusedFieldId(id),
+        onBlur: (id) => {
+          setBlurredFieldIds(blurredFieldIds.add(id));
+          setFocusedFieldId(undefined);
+        },
+        onMouseEnter: (id) => {
+          // We only care about the hover state of previously blurred fields.
+          // We don't want to show error tooltips for fields that haven't been
+          // visited yet.
+          if (blurredFieldIds.has(id)) setHoveredFieldId(id);
+        },
+        onMouseLeave: (id) => {
+          if (blurredFieldIds.has(id)) setHoveredFieldId(undefined);
+        },
+        primaryFieldId,
+      }}
+    />
+  );
+};