style(package): format with Prettier

docs/src/components/CarbonAd/CarbonAdNative.js

@@ -67,8 +67,8 @@ class CarbonAdNative extends PureComponent {
     debug('handleNativeJSON', { mounted: this.mounted })
     try {
       const sanitizedAd = json.ads
-        .filter(ad => Object.keys(ad).length > 0)
-        .filter(ad => !!ad.statlink)
+        .filter((ad) => Object.keys(ad).length > 0)
+        .filter((ad) => !!ad.statlink)
         .filter(Boolean)[0]
       debug('handleNativeJSON sanitizedAd', sanitizedAd)
 
@@ -99,19 +99,19 @@ class CarbonAdNative extends PureComponent {
 
     const colors = inverted
       ? {
-        divider: '#333',
-        background: '#222',
-        backgroundHover: '#1d1d1d',
-        color: '#999',
-        colorHover: '#ccc',
-      }
+          divider: '#333',
+          background: '#222',
+          backgroundHover: '#1d1d1d',
+          color: '#999',
+          colorHover: '#ccc',
+        }
       : {
-        divider: '#eee',
-        background: '#fff',
-        backgroundHover: 'whitesmoke',
-        color: '#555',
-        colorHover: '#333',
-      }
+          divider: '#eee',
+          background: '#fff',
+          backgroundHover: 'whitesmoke',
+          color: '#555',
+          colorHover: '#333',
+        }
 
     return (
       <a id={id} href={ad.statlink} target='_blank' rel='noopener noreferrer'>
@@ -142,7 +142,8 @@ class CarbonAdNative extends PureComponent {
               />
             ))}
 
-        <style>{`
+        <style>
+          {`
           #${id} {
             display: block;
             overflow: hidden;

docs/src/components/ComponentDoc/ComponentProp/ComponentPropDescription.js

@@ -9,6 +9,6 @@ export default class ComponentPropDescription extends PureComponent {
 
   render() {
     const { description } = this.props
-    return <p>{_.map(description, line => [line, <br key={line} />])}</p>
+    return <p>{_.map(description, (line) => [line, <br key={line} />])}</p>
   }
 }

docs/src/components/ComponentDoc/ComponentTable/ComponentTableRow.js

@@ -21,7 +21,7 @@ export default class ComponentTableRow extends Component {
 
   state = {}
 
-  toggleEnums = () => this.setState(prevState => ({ showEnums: !prevState.showEnums }))
+  toggleEnums = () => this.setState((prevState) => ({ showEnums: !prevState.showEnums }))
 
   render() {
     const { defaultValue, description, name, required, tags, type, value } = this.props

docs/src/components/IconSearch/IconSearch.js

@@ -86,7 +86,7 @@ const similarityScore = (strA, strB) => {
   const bWords = strB.trim().split(' ')
 
   return _.flow(
-    _.map(a => _.map(b => leven(a, b), bWords)),
+    _.map((a) => _.map((b) => leven(a, b), bWords)),
     _.map(_.min),
     _.sum,
   )(aWords)
@@ -103,7 +103,7 @@ export default class IconSearch extends Component {
 
   handleIncludeSimilarChange = (e, { checked }) => this.setState({ includeSimilar: checked })
 
-  copy = text => () => {
+  copy = (text) => () => {
     copyToClipboard(text)
     this.setState({ copied: true })
     setTimeout(() => this.setState({ copied: false }), 1000)
@@ -136,7 +136,7 @@ export default class IconSearch extends Component {
 
     // no search
     if (!query) {
-      return iconKeys.map(iconKey => (
+      return iconKeys.map((iconKey) => (
         <Grid key={iconKey} columns={5} doubling>
           <Grid.Column width={16}>
             <Header
@@ -147,7 +147,7 @@ export default class IconSearch extends Component {
               textAlign='left'
             />
           </Grid.Column>
-          {SUI[iconKey].map(name => this.renderIconColumn(name, iconKey))}
+          {SUI[iconKey].map((name) => this.renderIconColumn(name, iconKey))}
         </Grid>
       ))
     }
@@ -158,7 +158,7 @@ export default class IconSearch extends Component {
 
       // similar
       return includeSimilar && similarityScore(name, query) <= 2
-    }).map(name => this.renderIconColumn(name))
+    }).map((name) => this.renderIconColumn(name))
 
     // no results
     if (iconSearchMatches.length === 0) {

docs/src/components/LayoutsLayout.js

@@ -16,7 +16,8 @@ const docsButtonStyle = {
 }
 
 const style = (
-  <style>{`
+  <style>
+    {`
     @keyframes back-to-docs {
         0% { transform: translateY(0); }
         50% { transform: translateY(0.35em); }

docs/src/components/Logo/Logo.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Image } from 'semantic-ui-react'
 
-const Logo = props => <Image {...props} src='/logo.png' />
+const Logo = (props) => <Image {...props} src='/logo.png' />
 
 Logo.propTypes = Image.propTypes
 

docs/src/examples/addons/Confirm/Types/ConfirmExampleCallbacks.js

@@ -18,7 +18,11 @@ class ConfirmExampleCallbacks extends Component {
         </p>
 
         <Button onClick={this.show}>Show</Button>
-        <Confirm open={open} onCancel={this.handleCancel} onConfirm={this.handleConfirm} />
+        <Confirm
+          open={open}
+          onCancel={this.handleCancel}
+          onConfirm={this.handleConfirm}
+        />
       </div>
     )
   }

docs/src/examples/addons/Confirm/Types/ConfirmExampleConfirm.js

@@ -11,7 +11,11 @@ class ConfirmExampleConfirm extends Component {
     return (
       <div>
         <Button onClick={this.open}>Show</Button>
-        <Confirm open={this.state.open} onCancel={this.close} onConfirm={this.close} />
+        <Confirm
+          open={this.state.open}
+          onCancel={this.close}
+          onConfirm={this.close}
+        />
       </div>
     )
   }

docs/src/examples/addons/Pagination/States/PaginationExampleDisabled.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Pagination } from 'semantic-ui-react'
 
-const PaginationExampleDisabled = () => <Pagination defaultActivePage={1} disabled totalPages={5} />
+const PaginationExampleDisabled = () => (
+  <Pagination defaultActivePage={1} disabled totalPages={5} />
+)
 
 export default PaginationExampleDisabled

docs/src/examples/addons/Pagination/Types/PaginationExamplePagination.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Pagination } from 'semantic-ui-react'
 
-const PaginationExamplePagination = () => <Pagination defaultActivePage={5} totalPages={10} />
+const PaginationExamplePagination = () => (
+  <Pagination defaultActivePage={5} totalPages={10} />
+)
 
 export default PaginationExamplePagination

docs/src/examples/addons/Pagination/Usage/PaginationExampleOptions.js

@@ -12,7 +12,8 @@ export default class PaginationExampleCustomization extends Component {
     totalPages: 50,
   }
 
-  handleCheckboxChange = (e, { checked, name }) => this.setState({ [name]: checked })
+  handleCheckboxChange = (e, { checked, name }) =>
+    this.setState({ [name]: checked })
 
   handleInputChange = (e, { name, value }) => this.setState({ [name]: value })
 

docs/src/examples/addons/Portal/Types/PortalExamplePortal.js

@@ -20,9 +20,12 @@ export default class PortalExamplePortal extends Component {
 
   clearLog = () => this.setState({ log: [], logCount: 0 })
 
-  writeLog = eventName =>
-    this.setState(prevState => ({
-      log: [`${new Date().toLocaleTimeString()}: ${eventName}`, ...prevState.log].slice(0, 20),
+  writeLog = (eventName) =>
+    this.setState((prevState) => ({
+      log: [
+        `${new Date().toLocaleTimeString()}: ${eventName}`,
+        ...prevState.log,
+      ].slice(0, 20),
       logCount: prevState.logCount + 1,
     }))
 
@@ -45,7 +48,14 @@ export default class PortalExamplePortal extends Component {
             onOpen={this.handleOpen}
             onClose={this.handleClose}
           >
-            <Segment style={{ left: '40%', position: 'fixed', top: '50%', zIndex: 1000 }}>
+            <Segment
+              style={{
+                left: '40%',
+                position: 'fixed',
+                top: '50%',
+                zIndex: 1000,
+              }}
+            >
               <Header>This is an example portal</Header>
               <p>Portals have tons of great callback functions to hook into.</p>
               <p>To close, simply click the close button or click away</p>
@@ -55,13 +65,22 @@ export default class PortalExamplePortal extends Component {
         <Grid.Column>
           <Segment.Group>
             <Segment>
-              <Button compact size='small' floated='right' onClick={this.clearLog}>
+              <Button
+                compact
+                size='small'
+                floated='right'
+                onClick={this.clearLog}
+              >
                 Clear
               </Button>
               Event Log <Label circular>{logCount}</Label>
             </Segment>
             <Segment secondary>
-              <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+              <pre>
+                {log.map((e, i) => (
+                  <div key={i}>{e}</div>
+                ))}
+              </pre>
             </Segment>
           </Segment.Group>
         </Grid.Column>

docs/src/examples/addons/Radio/States/RadioExampleChecked.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Radio } from 'semantic-ui-react'
 
-const RadioExampleChecked = () => <Radio label='This radio comes pre-checked' defaultChecked />
+const RadioExampleChecked = () => (
+  <Radio label='This radio comes pre-checked' defaultChecked />
+)
 
 export default RadioExampleChecked

docs/src/examples/addons/Radio/States/RadioExampleReadOnly.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Radio } from 'semantic-ui-react'
 
-const RadioExampleReadOnly = () => <Radio label='This radio is read-only' readOnly />
+const RadioExampleReadOnly = () => (
+  <Radio label='This radio is read-only' readOnly />
+)
 
 export default RadioExampleReadOnly

docs/src/examples/addons/Radio/States/RadioExampleRemoteControl.js

@@ -3,13 +3,17 @@ import { Button, Radio } from 'semantic-ui-react'
 
 export default class RadioExampleRemoteControl extends Component {
   state = { checked: false }
-  toggle = () => this.setState(prevState => ({ checked: !prevState.checked }))
+  toggle = () => this.setState((prevState) => ({ checked: !prevState.checked }))
 
   render() {
     return (
       <div>
         <Button onClick={this.toggle}>Toggle it</Button>
-        <Radio label='Check this radio' onChange={this.toggle} checked={this.state.checked} />
+        <Radio
+          label='Check this radio'
+          onChange={this.toggle}
+          checked={this.state.checked}
+        />
       </div>
     )
   }

docs/src/examples/addons/Responsive/Types/ResponsiveExampleMixed.js

@@ -3,7 +3,8 @@ import { Responsive, Segment } from 'semantic-ui-react'
 
 const ResponsiveExampleMixed = () => (
   <Responsive as={Segment} minWidth={320} maxWidth={2559}>
-    Visible only if display has width between <code>320px</code> and <code>2559px</code>
+    Visible only if display has width between <code>320px</code> and{' '}
+    <code>2559px</code>
   </Responsive>
 )
 

docs/src/examples/addons/Responsive/Types/index.js

@@ -12,8 +12,8 @@ const ResponsiveTypesExamples = () => (
       examplePath='addons/Responsive/Types/ResponsiveExampleResponsive'
     >
       <Message info>
-        Instead of <code>Grid</code> visibility breakpoints, <code>Responsive</code> doesn't render
-        invisible content.
+        Instead of <code>Grid</code> visibility breakpoints,{' '}
+        <code>Responsive</code> doesn't render invisible content.
       </Message>
     </ComponentExample>
     <ComponentExample

docs/src/examples/addons/Responsive/Usage/ResponsiveExampleFireOnMount.js

@@ -8,14 +8,20 @@ export default class ResponsiveExampleFireOnMount extends Component {
 
   render() {
     const { width } = this.state
-    const textAlign = width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'
+    const textAlign =
+      width >= Responsive.onlyComputer.minWidth ? 'right' : 'left'
 
     return (
-      <Responsive as={Grid} columns={1} fireOnMount onUpdate={this.handleOnUpdate}>
+      <Responsive
+        as={Grid}
+        columns={1}
+        fireOnMount
+        onUpdate={this.handleOnUpdate}
+      >
         <Grid.Column textAlign={textAlign}>
           <Segment>
-            This grid has responsive align of the text. It will be right aligned on computer and
-            left aligned on other breakpoints.
+            This grid has responsive align of the text. It will be right aligned
+            on computer and left aligned on other breakpoints.
           </Segment>
         </Grid.Column>
       </Responsive>

docs/src/examples/addons/Responsive/Usage/ResponsiveExampleOnUpdate.js

@@ -8,8 +8,11 @@ export default class ResponsiveExampleOnUpdate extends Component {
   }
 
   handleOnUpdate = () =>
-    this.setState(prevState => ({
-      log: [`${new Date().toLocaleTimeString()}: onUpdate()`, ...prevState.log].slice(0, 20),
+    this.setState((prevState) => ({
+      log: [
+        `${new Date().toLocaleTimeString()}: onUpdate()`,
+        ...prevState.log,
+      ].slice(0, 20),
       logCount: prevState.logCount + 1,
     }))
 
@@ -40,7 +43,11 @@ export default class ResponsiveExampleOnUpdate extends Component {
             </Segment>
             {log.length > 0 && (
               <Segment secondary>
-                <pre>{log.map((e, i) => <div key={i}>{e}</div>)}</pre>
+                <pre>
+                  {log.map((e, i) => (
+                    <div key={i}>{e}</div>
+                  ))}
+                </pre>
               </Segment>
             )}
           </Segment.Group>

docs/src/examples/addons/TextArea/Types/index.js

@@ -12,8 +12,9 @@ const TextAreaTypesExamples = () => (
       examplePath='addons/TextArea/Types/TextAreaExampleTextArea'
     >
       <Message info>
-        You should always wrap a <code>Textarea</code> with a <code>Form</code> component to get
-        styles applied because Semantic UI applies styles for <code>.ui.form textarea</code>.
+        You should always wrap a <code>Textarea</code> with a <code>Form</code>{' '}
+        component to get styles applied because Semantic UI applies styles for{' '}
+        <code>.ui.form textarea</code>.
       </Message>
     </ComponentExample>
   </ExampleSection>