From fc65863fe859db3b926c7d14a2d504a534429da3 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Wed, 14 Nov 2018 13:35:03 -0600
Subject: [PATCH 1/8] feat(checkbox): allow checkbox to be either controlled or
 uncontrolled

---
 src/Checkbox.tsx     | 49 +++++++++++++++++++++++++++++++-------------
 stories/Checkbox.tsx | 22 +++++++++++++++++---
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
index 2ceca702..db3fd256 100644
--- a/src/Checkbox.tsx
+++ b/src/Checkbox.tsx
@@ -7,27 +7,46 @@ import { Input } from './Input';
 import { styled } from './utils';
 
 export interface ICheckboxProps {
-  checked?: boolean;
-  disabled?: boolean;
   id?: string;
   className?: string;
+  checked?: boolean;
+  disabled?: boolean;
   width?: string;
   height?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean) => void;
+}
+
+export interface ICheckboxState {
+  checked?: boolean;
 }
 
-export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
-  const { id, className, checked, width, height, disabled, onChange } = props;
+export class BasicCheckbox extends React.Component<ICheckboxProps, ICheckboxState> {
+  constructor(props: ICheckboxProps) {
+    super(props);
+    this.state = { checked: this.props.checked };
+  }
 
-  return (
-    <span className={className}>
-      <Box display="inline-block">
+  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ checked: event.target.checked });
+
+    if (this.props.onChange) {
+      this.props.onChange(event.target.checked);
+    }
+  };
+
+  public render() {
+    const { checked: stateChecked } = this.state;
+    const { id, className, width, height, disabled, checked: propsChecked } = this.props;
+
+    const checked = this.props.hasOwnProperty('checked') ? propsChecked : stateChecked;
+
+    return (
+      <Box as="label" display="inline-block" id={id} className={className}>
         <Input
           type="checkbox"
-          id={id}
-          checked={checked}
+          checked={checked || false}
           disabled={disabled}
-          onChange={onChange}
+          onChange={this.onChange}
           position="absolute"
           css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
         />
@@ -52,6 +71,8 @@ export const Checkbox = styled<ICheckboxProps>((props: ICheckboxProps) => {
           {checked && <Icon icon="check" fg="toggle.checked.fg" />}
         </Flex>
       </Box>
-    </span>
-  );
-})``;
+    );
+  }
+}
+
+export const Checkbox = styled<ICheckboxProps>(BasicCheckbox as any)``;
diff --git a/stories/Checkbox.tsx b/stories/Checkbox.tsx
index 6cf6c99a..624bc2d8 100644
--- a/stories/Checkbox.tsx
+++ b/stories/Checkbox.tsx
@@ -1,4 +1,5 @@
-import { action } from '@storybook/addon-actions';
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -6,13 +7,28 @@ import * as React from 'react';
 
 import { Checkbox } from '../src/Checkbox';
 
+const store = new Store({
+  checked: false,
+});
+
 export const checkboxKnobs = (tabName = 'Checkbox') => {
   return {
-    checked: boolean('checked', false, tabName),
     disabled: boolean('disabled', false, tabName),
   };
 };
 
 storiesOf('Checkbox', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => <Checkbox {...checkboxKnobs()} onChange={action('onChange')} />);
+  .add('uncontrolled', () => <Checkbox id="1" {...checkboxKnobs()} />)
+  .add('controlled checked', () => <Checkbox {...checkboxKnobs()} checked={true} />)
+  .addDecorator(StateDecorator(store))
+  .add('controlled', () => (
+    <Checkbox
+      id="2"
+      {...checkboxKnobs()}
+      checked={store.checked}
+      onChange={(checked?: boolean) => {
+        store.set({ checked });
+      }}
+    />
+  ));

From 46d06473e454eb8fc691bf94e3b6b8f9e79d8db4 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Wed, 14 Nov 2018 13:40:08 -0600
Subject: [PATCH 2/8] feat(toggle): allow toggle to be either controlled or
 uncontrolled

---
 src/Toggle.tsx     | 48 +++++++++++++++++++++++++++++++++-------------
 stories/Toggle.tsx | 22 ++++++++++++++++++---
 2 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/Toggle.tsx b/src/Toggle.tsx
index ac7763c3..43fc992a 100644
--- a/src/Toggle.tsx
+++ b/src/Toggle.tsx
@@ -7,27 +7,47 @@ import { Input } from './Input';
 import { styled } from './utils';
 
 export interface IToggleProps {
-  checked: boolean;
-  disabled?: boolean;
   id?: string;
   className?: string;
+  checked?: boolean;
+  disabled?: boolean;
   width?: string;
   height?: string;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (checked: boolean) => void;
 }
 
-export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
-  const { id, className, checked, width, height, disabled, onChange } = props;
+export interface IToggleState {
+  checked?: boolean;
+}
+
+export class BasicToggle extends React.Component<IToggleProps, IToggleState> {
+  constructor(props: IToggleProps) {
+    super(props);
+    this.state = { checked: this.props.checked };
+  }
+
+  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ checked: event.target.checked });
 
-  return (
-    <span className={className}>
-      <Box display="inline-block">
+    if (this.props.onChange) {
+      this.props.onChange(event.target.checked);
+    }
+  };
+
+  public render() {
+    const { checked: stateChecked } = this.state;
+
+    const { id, className, width, height, disabled, checked: propsChecked } = this.props;
+    const checked = this.props.hasOwnProperty('checked') ? propsChecked : stateChecked;
+
+    return (
+      <Box as="label" display="inline-block" id={id} className={className}>
         <Input
           type="checkbox"
           id={id}
-          checked={checked}
+          checked={checked || false}
           disabled={disabled}
-          onChange={onChange}
+          onChange={this.onChange}
           position="absolute"
           css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
         />
@@ -58,6 +78,8 @@ export const Toggle = styled<IToggleProps>((props: IToggleProps) => {
           />
         </Flex>
       </Box>
-    </span>
-  );
-})``;
+    );
+  }
+}
+
+export const Toggle = styled<IToggleProps>(BasicToggle as any)``;
diff --git a/stories/Toggle.tsx b/stories/Toggle.tsx
index 0ba256ba..360693d5 100644
--- a/stories/Toggle.tsx
+++ b/stories/Toggle.tsx
@@ -1,4 +1,5 @@
-import { action } from '@storybook/addon-actions';
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -6,13 +7,28 @@ import * as React from 'react';
 
 import { Toggle } from '../src/Toggle';
 
+const store = new Store({
+  checked: false,
+});
+
 export const toggleKnobs = (tabName = 'Toggle') => {
   return {
-    checked: boolean('checked', false, tabName),
     disabled: boolean('disabled', false, tabName),
   };
 };
 
 storiesOf('Toggle', module)
   .addDecorator(withKnobs)
-  .add('with defaults', () => <Toggle {...toggleKnobs()} onChange={action('onChange')} />);
+  .add('uncontrolled', () => <Toggle {...toggleKnobs()} />)
+  .add('controlled checked', () => <Toggle {...toggleKnobs()} checked={true} />)
+  .addDecorator(StateDecorator(store))
+  .add('controlled', () => (
+    <Toggle
+      id="2"
+      {...toggleKnobs()}
+      checked={store.checked}
+      onChange={(checked?: boolean) => {
+        store.set({ checked });
+      }}
+    />
+  ));

From 83751e202666e98b5a5e73c0aba863b2baa18e66 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Wed, 14 Nov 2018 14:16:02 -0600
Subject: [PATCH 3/8] feat(input): allow Input  to be either controlled or
 uncontrolled

---
 src/Input.tsx     | 40 +++++++++++++++++++++++++++++++++-------
 stories/Input.tsx |  5 +++--
 2 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index 81349b74..a8e8345f 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -7,16 +7,41 @@ import { styled } from './utils';
 export interface IInputProps extends ITextProps {
   type?: string;
   autosize?: boolean;
-  as?: any;
+  value?: string | number;
+  onChange?: (value: string | number) => void;
 }
 
-const StyledAutosizeInput = ({ autosize, className, ...rest }: IInputProps) => (
-  <AutosizeInput inputClassName={className} {...rest} />
-);
+export interface IInputState {
+  value?: string | number;
+}
+
+export class BasicInput extends React.Component<IInputProps, IInputState> {
+  constructor(props: IInputProps) {
+    super(props);
+    this.state = { value: this.props.value };
+  }
+
+  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    this.setState({ value: event.target.value });
+
+    if (this.props.onChange) {
+      this.props.onChange(event.target.value);
+    }
+  };
+
+  public render() {
+    const { autosize, className, ...rest } = this.props;
+    const value = (this.props.hasOwnProperty('value') ? this.props.value : this.state.value) || '';
+
+    if (autosize) {
+      return <AutosizeInput inputClassName={className} {...rest} value={value} onChange={this.onChange} />;
+    }
+
+    return React.createElement('input', { className, ...rest, value, onChange: this.onChange });
+  }
+}
 
-export const Input = styled<IInputProps>(Text as any).attrs({
-  as: ({ autosize }: IInputProps) => (autosize ? StyledAutosizeInput : 'input'),
-})(
+export const Input = styled<IInputProps, 'input'>(Text as any)(
   {
     // @ts-ignore
     ':focus': {
@@ -34,6 +59,7 @@ export const Input = styled<IInputProps>(Text as any).attrs({
 );
 
 Input.defaultProps = {
+  as: BasicInput,
   px: 'md',
   py: 'sm',
   border: 'xs',
diff --git a/stories/Input.tsx b/stories/Input.tsx
index 31b2dd0d..9c3b6407 100644
--- a/stories/Input.tsx
+++ b/stories/Input.tsx
@@ -38,6 +38,7 @@ export const autosizeInputKnobs = (tabName = 'Input'): any => {
 
 storiesOf('Input', module)
   .addDecorator(withKnobs)
+  .add('uncontrolled', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} />)
   .addDecorator(StateDecorator(store))
   .add('with defaults', () => (
     <Input
@@ -45,7 +46,7 @@ storiesOf('Input', module)
       {...textKnobs()}
       {...boxKnobs()}
       value={store.get('value')}
-      onChange={(e: any) => store.set({ value: e.target.value })}
+      onChange={(value: any) => store.set({ value })}
     />
   ))
   .add('autosize', () => (
@@ -55,6 +56,6 @@ storiesOf('Input', module)
       {...boxKnobs()}
       autosize
       value={store.get('value')}
-      onChange={(e: any) => store.set({ value: e.target.value })}
+      onChange={(value: any) => store.set({ value })}
     />
   ));

From af97f18db43fa553359fe7fe8e6b7900002ff2c8 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Wed, 14 Nov 2018 14:26:53 -0600
Subject: [PATCH 4/8] feat(textarea): allow textarea to be either controlled or
 uncontrolled

---
 src/Textarea.tsx     | 40 ++++++++++++++++++++++++++++++++++++----
 stories/Textarea.tsx | 25 +++++++++++++++++++++++--
 2 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/src/Textarea.tsx b/src/Textarea.tsx
index 909a44bf..3898aabf 100644
--- a/src/Textarea.tsx
+++ b/src/Textarea.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import AutosizeTextarea from 'react-textarea-autosize';
 
 import { ITextProps, Text } from './Text';
@@ -7,12 +8,42 @@ export interface ITextareaProps extends ITextProps {
   autosize?: boolean;
   minRows?: number;
   maxRows?: number;
-  as?: any;
+
+  value?: string;
+  onChange?: (value: string) => void;
+}
+
+export interface ITextareaState {
+  value?: string;
+}
+
+export class BasicTextArea extends React.Component<ITextareaProps, ITextareaState> {
+  constructor(props: ITextareaProps) {
+    super(props);
+    this.state = { value: this.props.value };
+  }
+
+  private onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    this.setState({ value: event.target.value });
+
+    if (this.props.onChange) {
+      this.props.onChange(event.target.value);
+    }
+  };
+
+  public render() {
+    const { autosize, minRows, maxRows, ...rest } = this.props;
+    const value = (this.props.hasOwnProperty('value') ? this.props.value : this.state.value) || '';
+
+    if (autosize) {
+      return <AutosizeTextarea {...rest} minRows={minRows} maxRows={maxRows} value={value} onChange={this.onChange} />;
+    }
+
+    return React.createElement('textarea', { ...rest, value, onChange: this.onChange });
+  }
 }
 
-export const Textarea = styled<ITextareaProps>(Text as any).attrs({
-  as: ({ autosize }: ITextareaProps) => (autosize ? AutosizeTextarea : 'textarea'),
-})(
+export const Textarea = styled<ITextareaProps>(Text as any)(
   {
     // @ts-ignore
     ':focus': {
@@ -34,6 +65,7 @@ export const Textarea = styled<ITextareaProps>(Text as any).attrs({
 );
 
 Textarea.defaultProps = {
+  as: BasicTextArea,
   px: 'md',
   py: 'sm',
   border: 'xs',
diff --git a/stories/Textarea.tsx b/stories/Textarea.tsx
index 8909febc..13a4a09a 100644
--- a/stories/Textarea.tsx
+++ b/stories/Textarea.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+// @ts-ignore
+import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
 import { boolean, number } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
@@ -9,6 +11,10 @@ import { Textarea } from '../src/Textarea';
 import { boxKnobs } from './Box';
 import { textKnobs } from './Text';
 
+const store = new Store({
+  value: 'TextArea Text',
+});
+
 export const textareaKnobs = (tabName = 'Textarea'): any => {
   return omitBy(
     {
@@ -49,9 +55,24 @@ export const textareaAutosizeKnobs = (tabName = 'Textarea'): any => {
 
 storiesOf('Textarea', module)
   .addDecorator(withKnobs)
+  .add('uncontrolled', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} />)
+  .addDecorator(StateDecorator(store))
   .add('with defaults', () => (
-    <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} defaultValue="Textarea Text" />
+    <Textarea
+      {...textareaKnobs()}
+      {...textKnobs()}
+      {...boxKnobs()}
+      value={store.get('value')}
+      onChange={(value: any) => store.set({ value })}
+    />
   ))
   .add('autosize', () => (
-    <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize defaultValue="Textarea Text" />
+    <Textarea
+      {...textareaAutosizeKnobs()}
+      {...textKnobs()}
+      {...boxKnobs()}
+      autosize
+      value={store.get('value')}
+      onChange={(value: any) => store.set({ value })}
+    />
   ));

From 3ab7007e6e9f8a2207c463bb3239883fd6f5d8a5 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Mon, 19 Nov 2018 12:05:11 -0600
Subject: [PATCH 5/8] fix(input): use react hooks

---
 src/Input.tsx     | 43 ++++++++++++++++++++++---------------------
 stories/Input.tsx | 18 ++++++------------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/src/Input.tsx b/src/Input.tsx
index a8e8345f..d2e7e440 100644
--- a/src/Input.tsx
+++ b/src/Input.tsx
@@ -1,3 +1,4 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 import AutosizeInput from 'react-input-autosize';
 
@@ -8,38 +9,38 @@ export interface IInputProps extends ITextProps {
   type?: string;
   autosize?: boolean;
   value?: string | number;
-  onChange?: (value: string | number) => void;
+  onChange?: (value?: string | number) => void;
 }
 
 export interface IInputState {
   value?: string | number;
 }
 
-export class BasicInput extends React.Component<IInputProps, IInputState> {
-  constructor(props: IInputProps) {
-    super(props);
-    this.state = { value: this.props.value };
-  }
+export const BasicInput = (props: IInputProps) => {
+  const { autosize, className, onChange = noop, ...rest } = props;
 
-  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ value: event.target.value });
+  const [value, setValue] = React.useState(props.value || '');
+  const internalValue = props.hasOwnProperty('value') ? props.value : value;
 
-    if (this.props.onChange) {
-      this.props.onChange(event.target.value);
-    }
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+    onChange(event.target.value);
   };
 
-  public render() {
-    const { autosize, className, ...rest } = this.props;
-    const value = (this.props.hasOwnProperty('value') ? this.props.value : this.state.value) || '';
-
-    if (autosize) {
-      return <AutosizeInput inputClassName={className} {...rest} value={value} onChange={this.onChange} />;
-    }
-
-    return React.createElement('input', { className, ...rest, value, onChange: this.onChange });
+  if (autosize) {
+    return (
+      <AutosizeInput
+        inputClassName={className}
+        placeholderIsMinWidth={true}
+        {...rest}
+        value={internalValue}
+        onChange={handleChange}
+      />
+    );
   }
-}
+
+  return React.createElement('input', { className, ...rest, value: internalValue, onChange: handleChange });
+};
 
 export const Input = styled<IInputProps, 'input'>(Text as any)(
   {
diff --git a/stories/Input.tsx b/stories/Input.tsx
index 9c3b6407..a9c26768 100644
--- a/stories/Input.tsx
+++ b/stories/Input.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 // @ts-ignore
 import { StateDecorator, Store } from '@sambego/storybook-state';
 import { withKnobs } from '@storybook/addon-knobs';
-import { boolean, select } from '@storybook/addon-knobs/react';
+import { boolean, select, text } from '@storybook/addon-knobs/react';
 import { storiesOf } from '@storybook/react';
 import { omitBy } from 'lodash';
 
@@ -21,6 +21,7 @@ export const inputKnobs = (tabName = 'Input'): any => {
     {
       disabled: boolean('disabled', false, tabName),
       type: select('type', InlineInputType, 'text', tabName),
+      placeholder: text('placeholder', 'placeholder', tabName),
     },
     val => !val
   );
@@ -31,6 +32,7 @@ export const autosizeInputKnobs = (tabName = 'Input'): any => {
     {
       disabled: boolean('disabled', false, tabName),
       type: select('type', AutosizeInputType, 'text', tabName),
+      placeholder: text('placeholder', 'placeholder', tabName),
     },
     val => !val
   );
@@ -39,8 +41,9 @@ export const autosizeInputKnobs = (tabName = 'Input'): any => {
 storiesOf('Input', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} />)
+  .add('autosize', () => <Input {...autosizeInputKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
   .addDecorator(StateDecorator(store))
-  .add('with defaults', () => (
+  .add('controlled store', () => (
     <Input
       {...inputKnobs()}
       {...textKnobs()}
@@ -49,13 +52,4 @@ storiesOf('Input', module)
       onChange={(value: any) => store.set({ value })}
     />
   ))
-  .add('autosize', () => (
-    <Input
-      {...autosizeInputKnobs()}
-      {...textKnobs()}
-      {...boxKnobs()}
-      autosize
-      value={store.get('value')}
-      onChange={(value: any) => store.set({ value })}
-    />
-  ));
+  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="someText" />);

From 5937f2c47fcdca4c8388a4c2897b423998972cf9 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Mon, 19 Nov 2018 12:09:47 -0600
Subject: [PATCH 6/8] fix(checkbox): use react hooks

---
 src/Checkbox.tsx     | 95 +++++++++++++++++++-------------------------
 stories/Checkbox.tsx |  4 +-
 2 files changed, 42 insertions(+), 57 deletions(-)

diff --git a/src/Checkbox.tsx b/src/Checkbox.tsx
index db3fd256..0b469652 100644
--- a/src/Checkbox.tsx
+++ b/src/Checkbox.tsx
@@ -1,9 +1,9 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 
 import { Box } from './Box';
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Input } from './Input';
 import { styled } from './utils';
 
 export interface ICheckboxProps {
@@ -16,63 +16,48 @@ export interface ICheckboxProps {
   onChange?: (checked: boolean) => void;
 }
 
-export interface ICheckboxState {
-  checked?: boolean;
-}
-
-export class BasicCheckbox extends React.Component<ICheckboxProps, ICheckboxState> {
-  constructor(props: ICheckboxProps) {
-    super(props);
-    this.state = { checked: this.props.checked };
-  }
+export const BasicCheckbox = (props: ICheckboxProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
 
-  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ checked: event.target.checked });
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
 
-    if (this.props.onChange) {
-      this.props.onChange(event.target.checked);
-    }
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.checked);
+    onChange(event.target.checked);
   };
 
-  public render() {
-    const { checked: stateChecked } = this.state;
-    const { id, className, width, height, disabled, checked: propsChecked } = this.props;
-
-    const checked = this.props.hasOwnProperty('checked') ? propsChecked : stateChecked;
-
-    return (
-      <Box as="label" display="inline-block" id={id} className={className}>
-        <Input
-          type="checkbox"
-          checked={checked || false}
-          disabled={disabled}
-          onChange={this.onChange}
-          position="absolute"
-          css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
-        />
-        <Flex
-          as="span"
-          display="block"
-          m="none"
-          p="none"
-          radius="md"
-          items="center"
-          justify="center"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '20px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
-          }}
-        >
-          {checked && <Icon icon="check" fg="toggle.checked.fg" />}
-        </Flex>
-      </Box>
-    );
-  }
-}
+  return (
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        checked={isChecked || false}
+        disabled={disabled}
+        onChange={handleChange}
+        style={{ position: 'absolute', clip: 'rect(1px, 1px, 1px, 1px)' }}
+      />
+      <Flex
+        as="span"
+        display="block"
+        m="none"
+        p="none"
+        radius="md"
+        items="center"
+        justify="center"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '20px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        {isChecked && <Icon icon="check" fg="toggle.checked.fg" />}
+      </Flex>
+    </Box>
+  );
+};
 
 export const Checkbox = styled<ICheckboxProps>(BasicCheckbox as any)``;
diff --git a/stories/Checkbox.tsx b/stories/Checkbox.tsx
index 624bc2d8..11d2476b 100644
--- a/stories/Checkbox.tsx
+++ b/stories/Checkbox.tsx
@@ -20,7 +20,6 @@ export const checkboxKnobs = (tabName = 'Checkbox') => {
 storiesOf('Checkbox', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Checkbox id="1" {...checkboxKnobs()} />)
-  .add('controlled checked', () => <Checkbox {...checkboxKnobs()} checked={true} />)
   .addDecorator(StateDecorator(store))
   .add('controlled', () => (
     <Checkbox
@@ -31,4 +30,5 @@ storiesOf('Checkbox', module)
         store.set({ checked });
       }}
     />
-  ));
+  ))
+  .add('controlled set', () => <Checkbox {...checkboxKnobs()} checked={true} />);

From 8b2b09f7cdfcfc5878a4c5cf40fbd36f8c4d8f22 Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Mon, 19 Nov 2018 12:14:07 -0600
Subject: [PATCH 7/8] fix(textarea): use react hooks

---
 package.json         |  8 ++++----
 src/Textarea.tsx     | 39 +++++++++++++++------------------------
 stories/Textarea.tsx | 14 ++++----------
 3 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/package.json b/package.json
index d6a3789d..7e2b9868 100644
--- a/package.json
+++ b/package.json
@@ -48,11 +48,14 @@
     "@fortawesome/react-fontawesome": "0.1.3",
     "@types/enzyme": "^3.1.15",
     "@types/lodash": "4.x.x",
+    "@types/react": "16.x.x",
+    "@types/react-dom": "16.x.x",
     "@types/react-input-autosize": "2.0.x",
     "@types/react-textarea-autosize": "4.3.x",
     "@types/styled-components": "4.0.x",
     "@types/styled-system": "3.0.x",
     "lodash": "4.x.x",
+    "react-dom": "^16.7.0-alpha.2",
     "react-input-autosize": "2.2.x",
     "react-textarea-autosize": "7.1.0-1",
     "styled-components": "4.0.x",
@@ -64,14 +67,11 @@
     "@fortawesome/free-solid-svg-icons": "5.5.x",
     "@sambego/storybook-state": "1.x.x",
     "@stoplight/scripts": "1.2.3",
-    "@types/react": "16.x.x",
-    "@types/react-dom": "16.x.x",
     "enzyme": "^3.7.0",
     "enzyme-adapter-react-16": "^1.7.0",
     "enzyme-to-json": "^3.3.4",
     "jest-enzyme": "^7.0.1",
-    "react": "16.x.x",
-    "react-dom": "16.x.x",
+    "react": "^16.7.0-alpha.2",
     "storybook-chromatic": "1.2.x",
     "typescript": "3.1.6"
   },
diff --git a/src/Textarea.tsx b/src/Textarea.tsx
index 3898aabf..1b835241 100644
--- a/src/Textarea.tsx
+++ b/src/Textarea.tsx
@@ -1,3 +1,4 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 import AutosizeTextarea from 'react-textarea-autosize';
 
@@ -13,35 +14,25 @@ export interface ITextareaProps extends ITextProps {
   onChange?: (value: string) => void;
 }
 
-export interface ITextareaState {
-  value?: string;
-}
-
-export class BasicTextArea extends React.Component<ITextareaProps, ITextareaState> {
-  constructor(props: ITextareaProps) {
-    super(props);
-    this.state = { value: this.props.value };
-  }
+export const BasicTextArea = (props: ITextareaProps) => {
+  const { autosize, minRows, maxRows, onChange = noop, ...rest } = props;
 
-  private onChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    this.setState({ value: event.target.value });
+  const [value, setValue] = React.useState(props.value || '');
+  const internalValue = props.hasOwnProperty('value') ? props.value : value;
 
-    if (this.props.onChange) {
-      this.props.onChange(event.target.value);
-    }
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setValue(event.target.value);
+    onChange(event.target.value);
   };
 
-  public render() {
-    const { autosize, minRows, maxRows, ...rest } = this.props;
-    const value = (this.props.hasOwnProperty('value') ? this.props.value : this.state.value) || '';
-
-    if (autosize) {
-      return <AutosizeTextarea {...rest} minRows={minRows} maxRows={maxRows} value={value} onChange={this.onChange} />;
-    }
-
-    return React.createElement('textarea', { ...rest, value, onChange: this.onChange });
+  if (autosize) {
+    return (
+      <AutosizeTextarea {...rest} minRows={minRows} maxRows={maxRows} value={internalValue} onChange={handleChange} />
+    );
   }
-}
+
+  return React.createElement('textarea', { ...rest, value: internalValue, onChange: handleChange });
+};
 
 export const Textarea = styled<ITextareaProps>(Text as any)(
   {
diff --git a/stories/Textarea.tsx b/stories/Textarea.tsx
index 13a4a09a..0ef8b03e 100644
--- a/stories/Textarea.tsx
+++ b/stories/Textarea.tsx
@@ -56,8 +56,9 @@ export const textareaAutosizeKnobs = (tabName = 'Textarea'): any => {
 storiesOf('Textarea', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} />)
+  .add('autosize', () => <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
   .addDecorator(StateDecorator(store))
-  .add('with defaults', () => (
+  .add('controlled', () => (
     <Textarea
       {...textareaKnobs()}
       {...textKnobs()}
@@ -66,13 +67,6 @@ storiesOf('Textarea', module)
       onChange={(value: any) => store.set({ value })}
     />
   ))
-  .add('autosize', () => (
-    <Textarea
-      {...textareaAutosizeKnobs()}
-      {...textKnobs()}
-      {...boxKnobs()}
-      autosize
-      value={store.get('value')}
-      onChange={(value: any) => store.set({ value })}
-    />
+  .add('controlled set', () => (
+    <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="Should not be update-able" />
   ));

From 0105eed61b67a6507d122c66fc4dad0e4ed9d8dd Mon Sep 17 00:00:00 2001
From: casserni <nicholascassera@gmail.com>
Date: Mon, 19 Nov 2018 12:19:44 -0600
Subject: [PATCH 8/8] fix(toggle): use react hooks

---
 src/Toggle.tsx       | 105 +++++++++++++++++++------------------------
 stories/Checkbox.tsx |   4 +-
 stories/Input.tsx    |   4 +-
 stories/Textarea.tsx |   4 +-
 4 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/src/Toggle.tsx b/src/Toggle.tsx
index 43fc992a..44dcf702 100644
--- a/src/Toggle.tsx
+++ b/src/Toggle.tsx
@@ -1,9 +1,9 @@
+import noop = require('lodash/noop');
 import * as React from 'react';
 
 import { Box } from './Box';
 import { Flex } from './Flex';
 import { Icon } from './Icon';
-import { Input } from './Input';
 import { styled } from './utils';
 
 export interface IToggleProps {
@@ -16,70 +16,55 @@ export interface IToggleProps {
   onChange?: (checked: boolean) => void;
 }
 
-export interface IToggleState {
-  checked?: boolean;
-}
+export const BasicToggle = (props: IToggleProps) => {
+  const { id, className, width, height, disabled, onChange = noop } = props;
 
-export class BasicToggle extends React.Component<IToggleProps, IToggleState> {
-  constructor(props: IToggleProps) {
-    super(props);
-    this.state = { checked: this.props.checked };
-  }
+  const [checked, setValue] = React.useState(props.checked || false);
+  const isChecked = props.hasOwnProperty('checked') ? props.checked : checked;
 
-  private onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({ checked: event.target.checked });
-
-    if (this.props.onChange) {
-      this.props.onChange(event.target.checked);
-    }
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.checked);
+    onChange(event.target.checked);
   };
 
-  public render() {
-    const { checked: stateChecked } = this.state;
-
-    const { id, className, width, height, disabled, checked: propsChecked } = this.props;
-    const checked = this.props.hasOwnProperty('checked') ? propsChecked : stateChecked;
-
-    return (
-      <Box as="label" display="inline-block" id={id} className={className}>
-        <Input
-          type="checkbox"
-          id={id}
-          checked={checked || false}
-          disabled={disabled}
-          onChange={this.onChange}
-          position="absolute"
-          css={{ clip: 'rect(1px, 1px, 1px, 1px)' }}
-        />
-        <Flex
-          as="span"
-          display="block"
-          m="none"
-          p="none"
-          radius="100px"
-          bg={checked ? 'toggle.checked.bg' : 'toggle.bg'}
-          cursor={disabled ? 'not-allowed' : 'pointer'}
-          width={width || '40px'}
-          height={height || '20px'}
-          opacity={disabled ? 0.6 : 1}
-          items="center"
+  return (
+    <Box as="label" display="inline-block" id={id} className={className}>
+      <input
+        type="checkbox"
+        id={id}
+        checked={isChecked || false}
+        disabled={disabled}
+        onChange={handleChange}
+        style={{ position: 'absolute', clip: 'rect(1px, 1px, 1px, 1px)' }}
+      />
+      <Flex
+        as="span"
+        display="block"
+        m="none"
+        p="none"
+        radius="100px"
+        bg={isChecked ? 'toggle.checked.bg' : 'toggle.bg'}
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        width={width || '40px'}
+        height={height || '20px'}
+        opacity={disabled ? 0.6 : 1}
+        items="center"
+        css={{
+          fontSize: '14px',
+          transition: 'background-color .15s ease-in-out',
+        }}
+      >
+        <Icon
+          icon="circle"
+          fg={isChecked ? 'toggle.checked.fg' : 'toggle.fg'}
           css={{
-            fontSize: '14px',
-            transition: 'background-color .15s ease-in-out',
+            paddingLeft: isChecked ? '22px' : '4px',
+            transition: 'padding .15s ease-in-out, color .25s ease-in-out',
           }}
-        >
-          <Icon
-            icon="circle"
-            fg={checked ? 'toggle.checked.fg' : 'toggle.fg'}
-            css={{
-              paddingLeft: checked ? '22px' : '4px',
-              transition: 'padding .15s ease-in-out, color .25s ease-in-out',
-            }}
-          />
-        </Flex>
-      </Box>
-    );
-  }
-}
+        />
+      </Flex>
+    </Box>
+  );
+};
 
 export const Toggle = styled<IToggleProps>(BasicToggle as any)``;
diff --git a/stories/Checkbox.tsx b/stories/Checkbox.tsx
index 11d2476b..0764de28 100644
--- a/stories/Checkbox.tsx
+++ b/stories/Checkbox.tsx
@@ -20,6 +20,7 @@ export const checkboxKnobs = (tabName = 'Checkbox') => {
 storiesOf('Checkbox', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Checkbox id="1" {...checkboxKnobs()} />)
+  .add('controlled set', () => <Checkbox {...checkboxKnobs()} checked={true} />)
   .addDecorator(StateDecorator(store))
   .add('controlled', () => (
     <Checkbox
@@ -30,5 +31,4 @@ storiesOf('Checkbox', module)
         store.set({ checked });
       }}
     />
-  ))
-  .add('controlled set', () => <Checkbox {...checkboxKnobs()} checked={true} />);
+  ));
diff --git a/stories/Input.tsx b/stories/Input.tsx
index a9c26768..c92d4d51 100644
--- a/stories/Input.tsx
+++ b/stories/Input.tsx
@@ -42,6 +42,7 @@ storiesOf('Input', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} />)
   .add('autosize', () => <Input {...autosizeInputKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="not editable" />)
   .addDecorator(StateDecorator(store))
   .add('controlled store', () => (
     <Input
@@ -51,5 +52,4 @@ storiesOf('Input', module)
       value={store.get('value')}
       onChange={(value: any) => store.set({ value })}
     />
-  ))
-  .add('controlled set', () => <Input {...inputKnobs()} {...textKnobs()} {...boxKnobs()} value="someText" />);
+  ));
diff --git a/stories/Textarea.tsx b/stories/Textarea.tsx
index 0ef8b03e..d859aad5 100644
--- a/stories/Textarea.tsx
+++ b/stories/Textarea.tsx
@@ -57,6 +57,7 @@ storiesOf('Textarea', module)
   .addDecorator(withKnobs)
   .add('uncontrolled', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} />)
   .add('autosize', () => <Textarea {...textareaAutosizeKnobs()} {...textKnobs()} {...boxKnobs()} autosize />)
+  .add('controlled set', () => <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="not-editable" />)
   .addDecorator(StateDecorator(store))
   .add('controlled', () => (
     <Textarea
@@ -66,7 +67,4 @@ storiesOf('Textarea', module)
       value={store.get('value')}
       onChange={(value: any) => store.set({ value })}
     />
-  ))
-  .add('controlled set', () => (
-    <Textarea {...textareaKnobs()} {...textKnobs()} {...boxKnobs()} value="Should not be update-able" />
   ));