feat(radio): support FormField

docs/Radio.mdx

@@ -5,7 +5,8 @@ route: /components/radio
 ---
 
 import { PropsTable, Playground } from 'docz';
-import { Button, Box, Radio } from 'tailor-ui';
+import { boolean } from 'yup';
+import { Button, Box, Radio, FormField } from 'tailor-ui';
 
 # Radio
 
@@ -32,6 +33,20 @@ import { Radio } from 'tailor-ui';
   <Radio defaultChecked>Radio</Radio>
 </Playground>
 
+#### Use with FormField
+
+<Playground>
+  <FormField
+    required
+    label="Checked Required"
+    validator={boolean()
+      .oneOf([true])
+      .required()}
+  >
+    <Radio>Click Me</Radio>
+  </FormField>
+</Playground>
+
 #### Disabled
 
 <Playground>
@@ -99,7 +114,7 @@ import { Radio } from 'tailor-ui';
           onChange={setValue}
         />
         <br />
-        <Button onClick={() => set('radio-d')}>Check last one</Button>
+        <Button onClick={() => setValue('radio-d')}>Check last one</Button>
       </>
     );
 
@@ -175,6 +190,21 @@ import { Radio } from 'tailor-ui';
 
 </Playground>
 
+#### Use with FormField
+
+<Playground>
+  <FormField
+    required
+    label="Yes or No?"
+    validator={value => (value !== 'yes' ? 'Should press yes' : null)}
+  >
+    <Radio.Group
+      defaultValue="no"
+      options={[{ label: 'Yes', value: 'yes' }, { label: 'No', value: 'no' }]}
+    />
+  </FormField>
+</Playground>
+
 ## API
 
 ### Radio

packages/tailor-ui/src/Radio/Radio.tsx

@@ -1,100 +1,11 @@
-import React, { ChangeEvent, FC, useContext } from 'react';
-import styled, { css } from 'styled-components';
+import React, { ChangeEvent, FC, useContext, useMemo } from 'react';
 
 import { Box } from '../Layout';
+import { useFormField } from '../FormField';
 
 import RadioGroup from './RadioGroup';
-import { Direction, RadioContext } from './RadioContext';
-
-const RadioWrapper = styled.span`
-  display: inline-block;
-  position: relative;
-  margin-bottom: 1px;
-  line-height: 1;
-`;
-
-const RadioInner = styled.span`
-  display: block;
-  position: relative;
-  width: 16px;
-  height: 16px;
-  padding: 0;
-  border: ${p => p.theme.borders.base};
-  border-radius: 50%;
-  border-color: ${p => p.theme.colors.gray400};
-  background-color: ${p => p.theme.colors.light};
-  color: ${p => p.theme.colors.gray700};
-
-  ${p => p.theme.transition};
-
-  &::after {
-    content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    opacity: 0;
-    background-color: ${p => p.theme.colors.primary};
-    transform: scale(0);
-    ${p => p.theme.transition};
-  }
-`;
-
-const StyledRadio = styled.input.attrs({
-  type: 'radio',
-})`
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-
-  &:checked + ${RadioInner /* sc-selector */} {
-    border-color: ${p => p.theme.colors.primary};
-  }
-
-  &:checked + ${RadioInner /* sc-selector */}::after {
-    opacity: 1;
-    transform: scale(1);
-  }
-`;
-
-interface RadioLabelBaseProps {
-  disabled?: boolean;
-}
-
-const RadioLabelBase = styled.label<RadioLabelBaseProps>`
-  display: inline-flex;
-  align-items: center;
-  font-size: ${p => p.theme.fontSizes.base};
-  cursor: ${p => (p.disabled ? 'not-allowed' : 'pointer')};
-
-  ${p =>
-    p.disabled
-      ? css`
-          opacity: 0.5;
-        `
-      : css`
-          &:hover ${RadioInner /* sc-selector */} {
-            border-color: ${p.theme.colors.primary};
-          }
-        `};
-`;
-
-const RadioLabel = styled(RadioLabelBase)<{ direction: Direction }>`
-  /* stylelint-disable-next-line no-descending-specificity */
-  & + ${RadioLabelBase /* sc-selector */} {
-    ${({ direction }) =>
-      direction === 'horizontal'
-        ? 'margin-left'
-        : 'margin-top' /* sc-prop */}: ${p => p.theme.space[2]};
-  }
-`;
+import { RadioContext } from './RadioContext';
+import { RadioInner, RadioLabel, RadioWrapper, StyledRadio } from './styles';
 
 export interface RadioProps {
   /**
@@ -127,21 +38,36 @@ const Radio: FC<RadioProps> & {
   value,
   ...props
 }) => {
-  const { _onChange, _isChecked, direction } = useContext(RadioContext);
+  const { handleChange, isChecked, direction } = useContext(RadioContext);
+
+  const inGroup = Boolean(handleChange);
+
+  const boxChecked = useMemo(
+    () => (isChecked && value ? isChecked(value) : checked),
+    [checked, isChecked, value]
+  );
+
+  const [, , setValue] = useFormField({
+    value: checked,
+    defaultValue: defaultChecked,
+  });
 
   return (
     <RadioLabel disabled={disabled} direction={direction}>
       <RadioWrapper>
         <StyledRadio
           disabled={disabled}
-          checked={_isChecked && value ? _isChecked(value) : checked}
+          checked={boxChecked}
           defaultChecked={defaultChecked}
-          onChange={(event: ChangeEvent) => {
+          onChange={event => {
             if (onChange) {
               onChange(event);
             }
-            if (_onChange && value) {
-              _onChange(value);
+            if (handleChange && value) {
+              handleChange(value);
+            }
+            if (!inGroup) {
+              setValue(event.target.checked);
             }
           }}
           {...props}

packages/tailor-ui/src/Radio/RadioContext.ts

@@ -3,8 +3,8 @@ import { createContext } from 'react';
 export type Direction = 'horizontal' | 'vertical';
 
 const RadioContext = createContext<{
-  _onChange?: (value: string) => void;
-  _isChecked?: (value: string) => boolean;
+  handleChange?: (value: string) => void;
+  isChecked?: (value: string) => boolean;
   direction: Direction;
 }>({
   direction: 'horizontal',

packages/tailor-ui/src/Radio/RadioGroup.tsx

@@ -1,13 +1,12 @@
-import React, { FC, useState } from 'react';
-import styled from 'styled-components';
+import React, { FC, useCallback, useMemo } from 'react';
+
+import { useOwnValue } from '@tailor-ui/hooks';
+
+import { useFormField } from '../FormField';
 
 import { Direction, RadioContext } from './RadioContext';
 import { Radio } from './Radio';
-
-const RadioGroupFlex = styled.div<{ direction: Direction }>`
-  display: ${p => (p.direction === 'horizontal' ? 'flex' : 'inline-flex')};
-  flex-direction: ${p => (p.direction === 'horizontal' ? 'row' : 'column')};
-`;
+import { RadioGroupFlex } from './styles';
 
 export interface RadioGroupProps {
   /**
@@ -37,49 +36,63 @@ export interface RadioGroupProps {
 }
 
 const RadioGroup: FC<RadioGroupProps> = ({
-  value: controlledValue,
+  value,
   defaultValue,
   options = null,
   onChange,
-  direction = 'horizontal' as Direction,
+  direction = 'horizontal',
   children,
   ...otherProps
 }) => {
-  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const [ownValue, setOwnValue] = useOwnValue(
+    {
+      value,
+      defaultValue,
+      onChange,
+    },
+    { fallbackValue: '' }
+  );
+
+  const [, , setValue] = useFormField({
+    value: ownValue,
+  });
+
+  const handleChange = useCallback(
+    newValue => {
+      setOwnValue(newValue);
+      setValue(newValue);
+    },
+    [setOwnValue, setValue]
+  );
+
+  const isChecked = useCallback(_value => ownValue === _value, [ownValue]);
+
+  const radioButtons = useMemo(
+    () =>
+      options
+        ? options.map(({ label, value: optionValue, disabled = false }) => (
+            <Radio
+              key={label}
+              value={optionValue}
+              disabled={disabled}
+              {...otherProps}
+            >
+              {label}
+            </Radio>
+          ))
+        : children,
+    [children, options, otherProps]
+  );
 
   return (
     <RadioContext.Provider
       value={{
         direction,
-        _onChange: _value => {
-          if (uncontrolledValue) {
-            setUncontrolledValue(_value);
-          }
-
-          if (onChange) {
-            onChange(_value);
-          }
-        },
-        _isChecked: _value =>
-          controlledValue
-            ? controlledValue === _value
-            : uncontrolledValue === _value,
+        handleChange,
+        isChecked,
       }}
     >
-      <RadioGroupFlex direction={direction}>
-        {options
-          ? options.map(({ label, value: optionValue, disabled = false }) => (
-              <Radio
-                key={label}
-                value={optionValue}
-                disabled={disabled}
-                {...otherProps}
-              >
-                {label}
-              </Radio>
-            ))
-          : children}
-      </RadioGroupFlex>
+      <RadioGroupFlex direction={direction}>{radioButtons}</RadioGroupFlex>
     </RadioContext.Provider>
   );
 };