fix linting issues

examples/component-examples/Avatar.js

@@ -7,16 +7,28 @@ const AvatarExample = {
   element: (
     <div>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`} scope={{Avatar}} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`} scope={{Avatar}} />
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/primer?v=3&s=128" size={128} username="primer" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`} scope={{Avatar}}/>
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/reactjs?v=3&s=32" size={32} username="reactjs" />`}
+          scope={{Avatar}}
+        />
       </Block>
       <Block>
-        <LiveEditor code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`} scope={{Avatar}}/>
+        <LiveEditor
+          code={`<Avatar src="https://avatars.githubusercontent.com/npm?v=3&s=64" username="npm" />`}
+          scope={{Avatar}}
+        />
       </Block>
     </div>
   )

examples/component-examples/Block.js

@@ -58,7 +58,10 @@ const BlockExample = {
         </tbody>
       </table>
       <Heading fontSize="3">Code Example</Heading>
-      <LiveEditor code={`<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>`} scope={{Block}} />
+      <LiveEditor
+        code={`<Block width="400" display="inline-block" bg="blue" p={3} fg="white">white</Block>`}
+        scope={{Block}}
+      />
     </div>
   )
 }

examples/component-examples/Box.js

@@ -22,7 +22,10 @@ const BoxExample = {
         <LiveEditor code={`<Box shadow="large" p={2}>This is a box with a large shadow.</Box>`} scope={{Box}} />
       </Block>
       <Block mb={6}>
-        <LiveEditor code={`<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>`} scope={{Box}} />
+        <LiveEditor
+          code={`<Box shadow="extra-large" p={2}>This is a box with an extra-large shadow.</Box>`}
+          scope={{Box}}
+        />
       </Block>
       <Block mb={6}>
         <LiveEditor code={`<Box borderColor="green" p={2}>This is a box with a green border.</Box>`} scope={{Box}} />

examples/component-examples/BranchName.js

@@ -4,13 +4,11 @@ import {Detail, LiveEditor} from '@compositor/kit'
 import ExampleHeading from '../doc-components/ExampleHeading'
 import {BranchName} from '../../src'
 
-const linkedBranch =
-`<BranchName tag="a" href="/">
+const linkedBranch = `<BranchName tag="a" href="/">
   a_new_feature_branch
 </BranchName>`
 
-const branchOcticon =
-`<BranchName>
+const branchOcticon = `<BranchName>
   <Octicon icon={GitBranch} />
   a_new_feature_branch
 </BranchName>`
@@ -19,12 +17,12 @@ const BranchNameExample = {
   name: 'BranchName',
   element: (
     <div>
-      <LiveEditor code={`<BranchName>a_new_feature_branch</BranchName>`} scope={{BranchName}}/>
+      <LiveEditor code={`<BranchName>a_new_feature_branch</BranchName>`} scope={{BranchName}} />
       <Detail>
         <ExampleHeading mt={3}>Linked BranchName</ExampleHeading>
         <LiveEditor code={linkedBranch} scope={{BranchName}} />
         <ExampleHeading mt={3}>BranchName with Octicon</ExampleHeading>
-        <LiveEditor scope={{BranchName, GitBranch, Octicon}} code={branchOcticon}/>
+        <LiveEditor scope={{BranchName, GitBranch, Octicon}} code={branchOcticon} />
       </Detail>
     </div>
   )

examples/component-examples/Buttons.js

@@ -9,38 +9,50 @@ const ButtonExample = {
   element: (
     <div>
       <Block mb={2}>
-        <LiveEditor code={`<Button> Button </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button> Button </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button size="sm"> Button small </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button size="sm"> Button small </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button size="large"> Button large </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button size="large"> Button large </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonDanger> ButtonDanger </ButtonDanger>`} scope={{ButtonDanger}}/>
+        <LiveEditor code={`<ButtonDanger> ButtonDanger </ButtonDanger>`} scope={{ButtonDanger}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonPrimary> ButtonPrimary </ButtonPrimary>`} scope={{ButtonPrimary}}/>
+        <LiveEditor code={`<ButtonPrimary> ButtonPrimary </ButtonPrimary>`} scope={{ButtonPrimary}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonOutline> ButtonOutline </ButtonOutline>`} scope={{ButtonOutline}}/>
+        <LiveEditor code={`<ButtonOutline> ButtonOutline </ButtonOutline>`} scope={{ButtonOutline}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button block> Button block </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button block> Button block </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<Button linkStyle> Button linkStyle </Button>`} scope={{Button}}/>
+        <LiveEditor code={`<Button linkStyle> Button linkStyle </Button>`} scope={{Button}} />
       </Block>
       <Block mb={2}>
-        <LiveEditor code={`<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>`} scope={{ButtonLink}}/>
+        <LiveEditor
+          code={`<ButtonLink href="https://www.goatslive.com/">This is an {'<a>'} styled as a button</ButtonLink>`}
+          scope={{ButtonLink}}
+        />
       </Block>
       <Block mb={2}>
         <ExampleHeading>Octicon Buttons</ExampleHeading>
-        <LiveEditor code={`<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />`} scope={{OcticonButton, Pencil}}/>
-        <LiveEditor code={`<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>`} scope={{OcticonButton, Text, X}}/>  
+        <LiveEditor
+          code={`<OcticonButton icon={Pencil} label="Edit" onClick={() => alert('edit')} mr={3} />`}
+          scope={{OcticonButton, Pencil}}
+        />
+        <LiveEditor
+          code={`<Text color="red"><OcticonButton icon={X} label="Close" onClick={() => alert('close')} mr={3} /></Text>`}
+          scope={{OcticonButton, Text, X}}
+        />
         <Block>
-          <LiveEditor code={`<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />`} scope={{OcticonButton, Hubot}}/>
+          <LiveEditor
+            code={`<OcticonButton icon={Hubot} size="large" label="ROBOT" onClick={() => alert('beep boop')} />`}
+            scope={{OcticonButton, Hubot}}
+          />
         </Block>
       </Block>
     </div>

examples/component-examples/Caret.js

@@ -2,21 +2,19 @@ import React from 'react'
 import {LiveEditor} from '@compositor/kit'
 import {Caret, Text, Box, Block} from '../../src'
 
-const example = (loc) =>
-`<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key={loc}>
+const example = loc =>
+  `<Box p={2} mb={4} position="relative" maxWidth={300} minHeight={96} shadow="small" key="${loc}">
   <Text fontSize={1} mono>
-    location='{loc}'
+    location='${loc}'
   </Text>
-  <Caret location={loc} />
+  <Caret location="${loc}" />
 </Box>`
 
 const CaretExample = {
   name: 'Caret',
   element: (
     <Block mt={4}>
-      {Caret.locations.map(loc => (
-        <LiveEditor code={example(loc)} scope={{Text, Caret, Box, loc}}/>
-      ))}
+      {Caret.locations.map(loc => <LiveEditor key={loc} code={example(loc)} scope={{Text, Caret, Box, loc}} />)}
     </Block>
   )
 }

examples/component-examples/CaretBox.js

@@ -1,10 +1,9 @@
 import React from 'react'
-import {PropsForm, LiveEditor} from '@compositor/kit'
-import {Caret, CaretBox, theme} from '../../src'
+import {LiveEditor} from '@compositor/kit'
+import {CaretBox} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const example =
-`<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
+const example = `<CaretBox my={4} p={2} minHeight={100} borderColor="purple">
   CaretBox
 </CaretBox>`
 
@@ -13,7 +12,7 @@ const CaretBoxExample = {
   element: (
     <div>
       <ExampleHeading mt={2}>CaretBox</ExampleHeading>
-      <LiveEditor code={example} scope={{CaretBox}}/>
+      <LiveEditor code={example} scope={{CaretBox}} />
     </div>
   )
 }

examples/component-examples/CircleBadge.js

@@ -3,16 +3,13 @@ import Octicon, {Zap} from '@githubprimer/octicons-react'
 import {LiveEditor} from '@compositor/kit'
 import {Block, CircleBadge, Heading} from '../../src'
 
-const octicon =
-`<CircleBadge size="medium">
+const octicon = `<CircleBadge size="medium">
   <Octicon icon={Zap}/>
 </CircleBadge>`
 
-const image =
-`<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
+const image = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 
-const sizes =
-`<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
+const sizes = `<CircleBadge bg="blue" size="small"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="medium"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>
 <CircleBadge bg="blue" size="large"><img src="https://avatars0.githubusercontent.com/t/1929972?s=280&v=4"/></CircleBadge>`
 

examples/component-examples/CircleOcticon.js

@@ -7,7 +7,10 @@ const CircleOcticonExample = {
   name: 'CircleOcticon',
   element: (
     <div className="d-flex">
-      <LiveEditor code={`<CircleOcticon icon={Check} size={32} bg="green" color="white" />`} scope={{CircleOcticon, Check}} />
+      <LiveEditor
+        code={`<CircleOcticon icon={Check} size={32} bg="green" color="white" />`}
+        scope={{CircleOcticon, Check}}
+      />
     </div>
   )
 }

examples/component-examples/CounterLabel.js

@@ -6,9 +6,9 @@ const CounterLabelExample = {
   name: 'CounterLabel',
   element: (
     <div>
-      <LiveEditor code={`<CounterLabel>12</CounterLabel>`} scope={{CounterLabel}}/>
-      <LiveEditor code={`<CounterLabel theme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}}/>
-      <LiveEditor code={`<CounterLabel theme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}}/>
+      <LiveEditor code={`<CounterLabel>12</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel theme={'gray'}>13</CounterLabel>`} scope={{CounterLabel}} />
+      <LiveEditor code={`<CounterLabel theme={'gray-light'}>13</CounterLabel>`} scope={{CounterLabel}} />
     </div>
   )
 }

examples/component-examples/Details.js

@@ -4,15 +4,13 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, Details} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const example1 =
-`<Details>
+const example1 = `<Details>
   <summary className="btn">Click me</summary>
   <p>This should show and hide</p>
 </Details>
 `
 
-const example2 =
-`<Details>
+const example2 = `<Details>
   {({open, toggle}) => (
     <React.Fragment>
       <summary className="btn" onClick={toggle}>
@@ -30,11 +28,11 @@ const DetailsExample = {
     <div>
       <Block mb={4}>
         <ExampleHeading>With static children</ExampleHeading>
-        <LiveEditor code={example1} scope={{Details}}/>
+        <LiveEditor code={example1} scope={{Details}} />
       </Block>
       <Block my={4}>
         <ExampleHeading>With children as a function</ExampleHeading>
-        <LiveEditor code={example2} scope={{Details}}/>
+        <LiveEditor code={example2} scope={{Details}} />
       </Block>
       <Block my={4}>
         <ExampleHeading>With render prop</ExampleHeading>

examples/component-examples/DonutChart.js

@@ -3,16 +3,14 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, DonutChart, Text, DonutSlice, theme} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const dataPropExample =
-`<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
+const dataPropExample = `<DonutChart mr={1} data={{error: 2, pending: 3, success: 5}} />
 <DonutChart mr={1} data={{error: 1, pending: 4, success: 2}} />
 <DonutChart mr={1} data={{pending: 2, success: 6}} />
 <DonutChart mr={1} data={{pending: 0, success: 1}} />
 <DonutChart mr={1} data={{pending: 1, queued: 1}} />
 <DonutChart mr={1} data={{unknown: 1}} />`
 
-const donutSliceExample =
-`<DonutChart mr={1}>
+const donutSliceExample = `<DonutChart mr={1}>
   <DonutSlice value={1} state="pending" />
   <DonutSlice value={1} state="success" />
   <DonutSlice value={1} state="error" />
@@ -43,8 +41,7 @@ const donutSliceExample =
   <DonutSlice value={1} state="queued" />
 </DonutChart>`
 
-const customColorsExample =
-`<DonutChart>
+const customColorsExample = `<DonutChart>
   <DonutSlice value={1} fill={theme.colors.purple[0]} />
   <DonutSlice value={1} fill={theme.colors.purple[1]} />
   <DonutSlice value={1} fill={theme.colors.purple[2]} />

examples/component-examples/Dropdown.js

@@ -3,34 +3,30 @@ import {LiveEditor} from '@compositor/kit'
 import {Block, Dropdown} from '../../src'
 import ExampleHeading from '../doc-components/ExampleHeading'
 
-const dropdownPrimary =
-`<Dropdown scheme={'primary'}>
+const dropdownPrimary = `<Dropdown scheme={'primary'}>
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
 </Dropdown>`
 
-const dropdown =
-`<Dropdown>
+const dropdown = `<Dropdown>
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
 </Dropdown>`
 
-const dropdownTitle =
-`<Dropdown title="Options">
+const dropdownTitle = `<Dropdown title="Options">
   <ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
   </ul>
 </Dropdown>`
 
-
 const DropdownExample = {
   name: 'Dropdown',
   element: (
@@ -45,7 +41,7 @@ const DropdownExample = {
       </Block>
       <Block my={4}>
         <ExampleHeading>Dropdown with title</ExampleHeading>
-        <LiveEditor code={dropdownTitle} scope={{Dropdown}}/>
+        <LiveEditor code={dropdownTitle} scope={{Dropdown}} />
       </Block>
     </div>
   )

examples/component-examples/Flash.js

@@ -7,19 +7,19 @@ const FlashExample = {
   element: (
     <div>
       <Block mb={3}>
-        <LiveEditor code={`<Flash> Flash </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash> Flash </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="yellow"> Flash yellow </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="yellow"> Flash yellow </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="red"> Flash red </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="red"> Flash red </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash scheme="green"> Flash green </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash scheme="green"> Flash green </Flash>`} scope={{Flash}} />
       </Block>
       <Block mb={3}>
-        <LiveEditor code={`<Flash full> Flash full </Flash>`} scope={{Flash}}/>
+        <LiveEditor code={`<Flash full> Flash full </Flash>`} scope={{Flash}} />
       </Block>
     </div>
   )