Switching to @Radium decorator

website/package-lock.json

@@ -370,11 +370,6 @@
       "integrity": "sha1-GcenYEc3dEaPILLS0DNyrX1Mv10=",
       "dev": true
     },
-    "auto-bind2": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/auto-bind2/-/auto-bind2-1.0.3.tgz",
-      "integrity": "sha512-+br9nya9M8ayHjai7m9rdpRxuEr8xcYRDrIp7HybNe0ixUHbc1kDiWXKMb0ldsfWb9Zi+SqJ9JfjW8nTkYD0QQ=="
-    },
     "autobind-decorator": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/autobind-decorator/-/autobind-decorator-2.1.0.tgz",

website/package.json

@@ -4,7 +4,6 @@
   "private": true,
   "dependencies": {
     "animejs": "^2.2.0",
-    "auto-bind2": "^1.0.2",
     "autobind-decorator": "^2.1.0",
     "eventemitter3": "^2.0.3",
     "npm": "^5.7.1",

website/src/App.js

@@ -9,8 +9,8 @@ import logoImage from 'images/logo.png'
 import { versionInfo } from './version'
 import { sizeInfo, colorInfo } from 'ui/style'
 import { api } from 'src/API'
-import { reactAutoBind } from 'auto-bind2'
 import PropTypes from 'prop-types'
+import autobind from 'autobind-decorator'
 
 export class App extends Component {
   static propTypes = {
@@ -19,16 +19,11 @@ export class App extends Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       loggedInUser: api.loggedInUser
     }
   }
 
-  handleUpdate() {
-    this.setState({ loggedInUser: api.loggedInUser })
-  }
-
   componentDidMount() {
     api.addListener('login', this.handleUpdate)
     api.addListener('logout', this.handleUpdate)
@@ -39,6 +34,11 @@ export class App extends Component {
     api.removeListener('logout', this.handleUpdate)
   }
 
+  @autobind
+  handleUpdate() {
+    this.setState({ loggedInUser: api.loggedInUser })
+  }
+
   handleLogout() {
     // We have to use window here because App does not have history in it's props
     window.location.replace('/logout')
@@ -52,6 +52,7 @@ export class App extends Component {
     window.location.replace('/profile')
   }
 
+  @autobind
   handleChangeTitle(title) {
     this.setState({ title })
   }

website/src/Auth/Login.js

@@ -7,7 +7,7 @@ import { Box, Image, Link, Text, Row, Column, BoundInput, BoundCheckbox, BoundBu
 import headerLogo from 'images/deighton.png'
 import { versionInfo } from '../version'
 import { FormBinder } from 'react-form-binder'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { sizeInfo, colorInfo } from 'ui/style'
 
 export class Login extends Component {
@@ -36,7 +36,6 @@ export class Login extends Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       waitModal: false,
       messageModal: null,
@@ -44,6 +43,7 @@ export class Login extends Component {
     }
   }
 
+  @autobind
   handleSubmit(e) {
     e.preventDefault()
     e.stopPropagation()
@@ -79,6 +79,7 @@ export class Login extends Component {
     }
   }
 
+  @autobind
   handleMessageModalDismiss() {
     this.setState({
       messageModal: null,

website/src/Modal/ChangeEmailModal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { autoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { Modal, Button, Row, Column, BoundInput, BoundButton, Text } from 'ui'
 import { regExpPattern } from 'regexp-pattern'
 import { FormBinder } from 'react-form-binder'
@@ -25,7 +25,6 @@ export class ChangeEmailModal extends React.Component {
 
   constructor(props) {
     super(props)
-    autoBind(this, (name) => (name.startsWith('handle')))
     this.state = {
       binder: new FormBinder({}, ChangeEmailModal.bindings)
     }
@@ -36,10 +35,12 @@ export class ChangeEmailModal extends React.Component {
     this.props.onDismiss(newEmail)
   }
 
+  @autobind
   handleClose() {
     this.close(null)
   }
 
+  @autobind
   handleSubmit(e) {
     e.preventDefault()
     let newEmail = null
@@ -51,6 +52,7 @@ export class ChangeEmailModal extends React.Component {
     this.close(newEmail)
   }
 
+  @autobind
   handleClick(e) {
     this.close(null)
   }

website/src/Modal/ChangePasswordModal.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { autoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { Modal, Button, Icon, Column, Row, Text, BoundInput, BoundButton } from 'ui'
 import { FormBinder } from 'react-form-binder'
 
@@ -31,7 +31,6 @@ export class ChangePasswordModal extends React.Component {
 
   constructor(props) {
     super(props)
-    autoBind(this, (name) => (name.startsWith('handle')))
     this.state = {
       binder: new FormBinder({}, ChangePasswordModal.bindings)
     }
@@ -42,10 +41,12 @@ export class ChangePasswordModal extends React.Component {
     this.props.onDismiss(passwords)
   }
 
+  @autobind
   handleClose() {
-    close(null)
+    this.close(null)
   }
 
+  @autobind
   handleSubmit(e) {
     e.preventDefault()
     let passwords = null
@@ -58,6 +59,7 @@ export class ChangePasswordModal extends React.Component {
     this.close(passwords)
   }
 
+  @autobind
   handleClick(e) {
     this.close(null)
   }

website/src/Modal/YesNoMessageModal.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Modal, Button, Row, Column, Text, Icon } from 'ui'
 import { sizeInfo } from 'ui/style'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class YesNoMessageModal extends React.Component {
   static propTypes = {
@@ -11,11 +11,7 @@ export class YesNoMessageModal extends React.Component {
     onDismiss: PropTypes.func
   }
 
-  constructor(props) {
-    super(props)
-    reactAutoBind(this)
-  }
-
+  @autobind
   onSubmit(e, yes) {
     e.preventDefault()
     e.stopPropagation()

website/src/Profile/Profile.js

@@ -2,12 +2,11 @@ import React from 'react'
 import { ProfileForm } from './ProfileForm'
 import { api } from 'src/API'
 import { WaitModal, MessageModal, ChangePasswordModal, ChangeEmailModal } from '../Modal'
-import { autoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
 export class Profile extends React.Component {
   constructor(props) {
     super(props)
-    autoBind(this, (name) => (name.startsWith('handle')))
 
     const user = api.loggedInUser
     this.state = {
@@ -29,6 +28,7 @@ export class Profile extends React.Component {
     api.removeListener('newProfileImage', this.handleNewProfileImage)
   }
 
+  @autobind
   handleSaved(user) {
     this.setState({ waitModal: { message: 'Updating Profile' } })
     api.updateUser(user).then((updatedUser) => {
@@ -44,14 +44,17 @@ export class Profile extends React.Component {
     })
   }
 
+  @autobind
   handleMessageModalDismiss() {
     this.setState({ messageModal: null })
   }
 
+  @autobind
   handleChangePassword() {
     this.setState({ changePasswordModal: true })
   }
 
+  @autobind
   handleProgress(uploadData) {
     if (this.state.progressModal) {
       this.setState({ uploadPercent: Math.round(uploadData.uploadedChunks / uploadData.numberOfChunks * 100) })
@@ -61,10 +64,12 @@ export class Profile extends React.Component {
     }
   }
 
+  @autobind
   handleUploadCancel(result) {
     this.setState({ progressModal: null })
   }
 
+  @autobind
   handleChangePasswordDismiss(passwords) {
     this.setState({ changePasswordModal: false })
 
@@ -86,10 +91,12 @@ export class Profile extends React.Component {
     }
   }
 
+  @autobind
   handleChangeEmail() {
     this.setState({ changeEmailModal: {} })
   }
 
+  @autobind
   handleChangeEmailDismiss(newEmail) {
     this.setState({ changeEmailModal: null })
     if (!newEmail) {

website/src/Users/UserForm.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { regExpPattern } from 'regexp-pattern'
 import { api } from 'src/API'
 import { Row, Column, BoundInput, BoundButton, BoundCheckbox, BoundEmailIcon } from 'ui'
@@ -65,7 +65,6 @@ export class UserForm extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onModifiedChanged)
     }
@@ -79,6 +78,7 @@ export class UserForm extends React.Component {
     }
   }
 
+  @autobind
   handleSubmit(e) {
     e.preventDefault()
 
@@ -89,6 +89,7 @@ export class UserForm extends React.Component {
     }
   }
 
+  @autobind
   handleReset() {
     const { user, onModifiedChanged } = this.props
 
@@ -99,10 +100,12 @@ export class UserForm extends React.Component {
     }
   }
 
+  @autobind
   handleChangeEmail() {
     this.props.onChangeEmail()
   }
 
+  @autobind
   handleResendEmail() {
     this.props.onResendEmail()
   }

website/src/Users/Users.js

@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { UserList } from './UserList'
 import { UserForm } from './UserForm'
 import { UserFormPlaceholder } from './UserFormPlaceholder'
@@ -16,7 +16,6 @@ export class Users extends Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       modified: false,
       selectedUser: null,
@@ -57,6 +56,7 @@ export class Users extends Component {
     }
   }
 
+  @autobind
   handleUserListClick(e, index) {
     let user = this.state.users[index]
 
@@ -74,6 +74,7 @@ export class Users extends Component {
     }
   }
 
+  @autobind
   handleSave(user) {
     if (user._id) {
       this.setState({ waitModal: { message: 'Updating User' } })
@@ -118,10 +119,12 @@ export class Users extends Component {
     }
   }
 
+  @autobind
   handleChangeEmail() {
     this.setState({ changeEmailModal: { oldEmail: this.state.selectedUser.email } })
   }
 
+  @autobind
   handleResendEmail() {
     this.setState({
       waitModal: { message: 'Resending Email...' }
@@ -147,6 +150,7 @@ export class Users extends Component {
     })
   }
 
+  @autobind
   handleChangeEmailDismiss(newEmail) {
     this.setState({ changeEmailModal: null })
     if (!newEmail) {
@@ -178,6 +182,7 @@ export class Users extends Component {
     }
   }
 
+  @autobind
   handleRemove() {
     this.setState({
       yesNoModal: {
@@ -187,6 +192,7 @@ export class Users extends Component {
     })
   }
 
+  @autobind
   handleRemoveModalDismiss(yes) {
     if (yes) {
       // TODO: Pass the _id back from the dialog input data
@@ -219,6 +225,7 @@ export class Users extends Component {
     })
   }
 
+  @autobind
   handleModifiedModalDismiss(yes) {
     if (yes) {
       this.setState({
@@ -234,14 +241,17 @@ export class Users extends Component {
     })
   }
 
+  @autobind
   handleMessageModalDismiss() {
     this.setState({ messageModal: null })
   }
 
+  @autobind
   handleModifiedChanged(modified) {
     this.setState({ modified: modified })
   }
 
+  @autobind
   handleAddNewUser() {
     let newUser = {}
     let newUsers = [newUser].concat(this.state.users)

website/src/ui/Anime.js

@@ -2,7 +2,7 @@ import React from 'react'
 import anime from 'animejs'
 import PropTypes from 'prop-types'
 
-export default class Anime extends React.Component {
+export class Anime extends React.Component {
   static propTypes = {
     as: PropTypes.string,
     children: PropTypes.node,

website/src/ui/BoundButton.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Button } from 'ui'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
-export default class BoundButton extends React.Component {
+export class BoundButton extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     text: PropTypes.string,
@@ -15,14 +15,12 @@ export default class BoundButton extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
-
     let { name, binder } = this.props
-
     binder.addListener(name, this.updateValue)
     this.state = binder.getFieldState(name)
   }
 
+  @autobind
   updateValue(e) {
     this.setState(e.state)
   }

website/src/ui/BoundCheckbox.js

@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Checkbox } from 'ui'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { fontInfo } from 'ui/style'
 
-export default class BoundCheckbox extends React.Component {
+export class BoundCheckbox extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     label: PropTypes.string,
@@ -13,10 +13,10 @@ export default class BoundCheckbox extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = props.binder.getFieldState(props.name)
   }
 
+  @autobind
   handleChange(e, data) {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)

website/src/ui/BoundEmailIcon.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { Text, Icon } from 'ui'
 import { sizeInfo } from 'ui/style'
 
-export default class BoundEmailIcon extends React.Component {
+export class BoundEmailIcon extends React.Component {
   static propTypes = {
     name: PropTypes.string,
     binder: PropTypes.object,

website/src/ui/BoundInput.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Input, Text } from 'ui'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 
-export default class BoundInput extends React.Component {
+export class BoundInput extends React.Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     message: PropTypes.string,
@@ -15,10 +15,10 @@ export default class BoundInput extends React.Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = props.binder.getFieldState(props.name)
   }
 
+  @autobind
   handleChange(e) {
     const { binder, name } = this.props
     const state = binder.getFieldState(name)

website/src/ui/Box.js

@@ -2,7 +2,8 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
-class Box extends Component {
+@Radium
+export class Box extends Component {
   static propTypes = {
     borderTop: PropTypes.object,
     borderBottom: PropTypes.object,
@@ -53,5 +54,3 @@ class Box extends Component {
     )
   }
 }
-
-export default Radium(Box)

website/src/ui/Button.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { fontInfo, colorInfo, sizeInfo } from './style'
 
-class Button extends Component {
+@Radium
+export class Button extends Component {
   static propTypes = {
     text: PropTypes.node,
     visible: PropTypes.bool,
@@ -54,5 +55,3 @@ class Button extends Component {
     )
   }
 }
-
-export default Radium(Button)

website/src/ui/Checkbox.js

@@ -1,10 +1,11 @@
 import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
-import { reactAutoBind } from 'auto-bind2'
+import autobind from 'autobind-decorator'
 import { colorInfo, sizeInfo } from './style'
 
-class Checkbox extends Component {
+@Radium
+export class Checkbox extends Component {
   static propTypes = {
     value: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -62,7 +63,6 @@ class Checkbox extends Component {
 
   constructor(props) {
     super(props)
-    reactAutoBind(this)
     this.state = {
       checked: props.value
     }
@@ -74,7 +74,8 @@ class Checkbox extends Component {
     }
   }
 
-  onClick(e) {
+  @autobind
+  handleClick(e) {
     const checked = !this.state.checked
 
     this.setState({ checked })
@@ -90,12 +91,10 @@ class Checkbox extends Component {
 
     return (
       <div style={[Checkbox.style.checkbox, disabled ? Checkbox.style.checkboxDisabled : !checked ? Checkbox.style.checkboxUnchecked : null]}
-        onClick={disabled ? null : this.onClick}>
+        onClick={disabled ? null : this.handleClick}>
         <input id={id} type='checkbox' style={Checkbox.style.input} disabled={disabled} />
         <div style={[Checkbox.style.checkmark, !checked && Checkbox.style.checkmarkUnchecked]} />
       </div>
     )
   }
 }
-
-export default Radium(Checkbox)

website/src/ui/Column.js

@@ -2,7 +2,8 @@ import Radium from 'radium'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-class Column extends Component {
+@Radium
+export class Column extends Component {
   static propTypes = {
     children: PropTypes.node,
     minHeight: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -41,5 +42,3 @@ Column.Item = Radium(class StackLayoutItem extends Component {
     )
   }
 })
-
-export default Radium(Column)

website/src/ui/Dimmer.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import Radium from 'radium'
 import PropTypes from 'prop-types'
-import { reactAutoBind } from 'auto-bind2'
 
+@Radium
 export class Dimmer extends Component {
   static propTypes = {
     active: PropTypes.bool.isRequired,
@@ -27,22 +27,15 @@ export class Dimmer extends Component {
     }
   }
 
-  constructor(props) {
-    super(props)
-    reactAutoBind(this)
-  }
-
-  preventPropagation(e) {
+  handleClick(e) {
     e.stopPropagation()
   }
 
   render() {
     return this.props.active ? (
-      <div style={Dimmer.style.div} onClick={this.preventPropagation}>
+      <div style={Dimmer.style.div} onClick={this.handleClick}>
         {this.props.children}
       </div>
     ) : null
   }
 }
-
-export default Radium(Dimmer)

website/src/ui/HeaderText.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { sizeInfo, fontInfo } from 'ui/style'
 
-class HeaderText extends Component {
+@Radium
+export class HeaderText extends Component {
   static propTypes = {
     text: PropTypes.string,
   }
@@ -31,5 +32,3 @@ class HeaderText extends Component {
     )
   }
 }
-
-export default Radium(HeaderText)

website/src/ui/Icon.js

@@ -4,7 +4,7 @@ import { sizeInfo } from './style'
 
 // See https://www.flaticon.com/packs/free-basic-ui-elements
 
-export default class Icon extends Component {
+export class Icon extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     size: PropTypes.number,

website/src/ui/Image.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { sizeInfo } from './style'
 
-class Image extends Component {
+@Radium
+export class Image extends Component {
   static propTypes = {
     source: PropTypes.string,
     width: PropTypes.number,
@@ -23,5 +24,3 @@ class Image extends Component {
     )
   }
 }
-
-export default Radium(Image)

website/src/ui/Input.js

@@ -5,7 +5,8 @@ import { colorInfo, sizeInfo, fontInfo } from 'ui/style'
 
 // See https://stackoverflow.com/a/6891562/576235 for why we wrap the <input /> element
 
-class Input extends Component {
+@Radium
+export class Input extends Component {
   static propTypes = {
     password: PropTypes.bool,
     placeholder: PropTypes.string,
@@ -58,5 +59,3 @@ class Input extends Component {
     )
   }
 }
-
-export default Radium(Input)

website/src/ui/Link.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { fontInfo } from './style'
 
-class Link extends Component {
+@Radium
+export class Link extends Component {
   static propTypes = {
     to: PropTypes.string,
     size: PropTypes.string,
@@ -26,5 +27,3 @@ class Link extends Component {
     )
   }
 }
-
-export default Radium(Link)

website/src/ui/List.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react'
 import { Box, Icon } from '.'
 import { sizeInfo, colorInfo, fontInfo } from './style'
 
-class List extends Component {
+@Radium
+export class List extends Component {
   static propTypes = {
     data: PropTypes.array,
     render: PropTypes.func.isRequired,
@@ -91,5 +92,3 @@ List.Text = Radium(class ListText extends Component {
     )
   }
 })
-
-export default Radium(List)

website/src/ui/Loader.js

@@ -3,7 +3,8 @@ import Radium from 'radium'
 import { colorInfo, sizeInfo } from 'ui/style'
 import anime from 'animejs'
 
-class Loader extends React.Component {
+@Radium
+export class Loader extends React.Component {
   render() {
     const size = sizeInfo.loaderSize
     const spacing = sizeInfo.loaderSpacing
@@ -40,5 +41,3 @@ class Loader extends React.Component {
     )
   }
 }
-
-export default Radium(Loader)

website/src/ui/Modal.js

@@ -4,7 +4,8 @@ import Radium from 'radium'
 import { Dimmer } from 'ui'
 import { colorInfo, sizeInfo } from 'ui/style'
 
-class Modal extends Component {
+@Radium
+export class Modal extends Component {
   static propTypes = {
     children: PropTypes.node,
     open: PropTypes.bool,
@@ -34,5 +35,3 @@ class Modal extends Component {
     )
   }
 }
-
-export default Radium(Modal)

website/src/ui/PanelButton.js

@@ -4,7 +4,8 @@ import React, { Component } from 'react'
 import { Icon } from '.'
 import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
 
-class PanelButton extends Component {
+@Radium
+export class PanelButton extends Component {
   static propTypes = {
     onClick: PropTypes.func,
     icon: PropTypes.string.isRequired,
@@ -59,5 +60,3 @@ class PanelButton extends Component {
     )
   }
 }
-
-export default Radium(PanelButton)

website/src/ui/Row.js

@@ -2,7 +2,8 @@ import Radium from 'radium'
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-class Row extends Component {
+@Radium
+export class Row extends Component {
   static propTypes = {
     children: PropTypes.node,
     minWidth: PropTypes.oneOfType([ PropTypes.string, PropTypes.number ]),
@@ -41,5 +42,3 @@ Row.Item = Radium(class RowLayoutItem extends Component {
     )
   }
 })
-
-export default Radium(Row)

website/src/ui/Text.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { fontInfo } from './style'
 
-class Text extends Component {
+@Radium
+export class Text extends Component {
   static propTypes = {
     size: PropTypes.oneOf(['small', 'medium', 'large', 'huge']),
     color: PropTypes.oneOf(['normal', 'inverse', 'alert', 'dimmed']),
@@ -37,5 +38,3 @@ class Text extends Component {
     )
   }
 }
-
-export default Radium(Text)

website/src/ui/index.js

@@ -1,22 +1,22 @@
-export { default as Anime } from './Anime'
-export { default as Box } from './Box'
-export { default as Button } from './Button'
+export { Anime } from './Anime'
+export { Box } from './Box'
+export { Button } from './Button'
 export { HeaderButton } from './HeaderButton'
-export { default as HeaderText } from './HeaderText'
-export { default as PanelButton } from './PanelButton'
-export { default as Checkbox } from './Checkbox'
-export { default as Input } from './Input'
-export { default as Image } from './Image'
-export { default as Text } from './Text'
-export { default as Link } from './Link'
-export { default as Icon } from './Icon'
-export { default as List } from './List'
-export { default as Modal } from './Modal'
-export { default as Dimmer } from './Dimmer'
-export { default as Loader } from './Loader'
-export { default as Row } from './Row'
-export { default as Column } from './Column'
-export { default as BoundButton } from './BoundButton'
-export { default as BoundCheckbox } from './BoundCheckbox'
-export { default as BoundInput } from './BoundInput'
-export { default as BoundEmailIcon } from './BoundEmailIcon'
+export { HeaderText } from './HeaderText'
+export { PanelButton } from './PanelButton'
+export { Checkbox } from './Checkbox'
+export { Input } from './Input'
+export { Image } from './Image'
+export { Text } from './Text'
+export { Link } from './Link'
+export { Icon } from './Icon'
+export { List } from './List'
+export { Modal } from './Modal'
+export { Dimmer } from './Dimmer'
+export { Loader } from './Loader'
+export { Row } from './Row'
+export { Column } from './Column'
+export { BoundButton } from './BoundButton'
+export { BoundCheckbox } from './BoundCheckbox'
+export { BoundInput } from './BoundInput'
+export { BoundEmailIcon } from './BoundEmailIcon'