chore: formatting

Author: kris-ellery

.eslintrc

@@ -1,6 +1,6 @@
 {
-  "extends": ["plugin:zillow/recommended", "plugin:zillow/jest"],
-  "env": {
-    "browser": true
-  }
+    "extends": ["plugin:zillow/recommended", "plugin:zillow/jest"],
+    "env": {
+        "browser": true
+    }
 }

.versionrc.js

@@ -13,6 +13,6 @@ module.exports = {
         { type: 'refactor', section: 'Code Refactoring' },
         { type: 'test', section: 'Tests' },
         { type: 'build', section: 'Build System' },
-        { type: 'ci', section: 'Continuous Integration' }
-    ]
+        { type: 'ci', section: 'Continuous Integration' },
+    ],
 };

src/components/ReactSlider/ReactSlider.md

@@ -114,9 +114,13 @@ Track changes with `onBeforeChange`, `onChange`, and `onAfterChange` event handl
     className="horizontal-slider"
     thumbClassName="example-thumb"
     trackClassName="example-track"
-    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onBeforeChange={(value, index) =>
+        console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)
+    }
     onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
-    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) =>
+        console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)
+    }
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
 />
 ```
@@ -128,14 +132,18 @@ const [value, setValue] = React.useState([25, 50]);
 
 <ReactSlider
     value={value}
-    onBeforeChange={(value, index) => console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)}
+    onBeforeChange={(value, index) =>
+        console.log(`onBeforeChange: ${JSON.stringify({ value, index })}`)
+    }
     onChange={(value, index) => console.log(`onChange: ${JSON.stringify({ value, index })}`)}
-    onAfterChange={(value, index) => console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)}
+    onAfterChange={(value, index) =>
+        console.log(`onAfterChange: ${JSON.stringify({ value, index })}`)
+    }
     className="horizontal-slider"
     thumbClassName="example-thumb"
     trackClassName="example-track"
     renderThumb={(props, state) => <div {...props}>{state.valueNow}</div>}
-/>
+/>;
 ```
 
 Custom styling using [styled-components](https://www.styled-components.com/)
@@ -164,17 +172,13 @@ const Thumb = (props, state) => <StyledThumb {...props}>{state.valueNow}</Styled
 const StyledTrack = styled.div`
     top: 0;
     bottom: 0;
-    background: ${props => props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd'};
+    background: ${props => (props.index === 2 ? '#f00' : props.index === 1 ? '#0f0' : '#ddd')};
     border-radius: 999px;
 `;
 
 const Track = (props, state) => <StyledTrack {...props} index={state.index} />;
 
-<StyledSlider
-    defaultValue={[50, 75]}
-    renderTrack={Track}
-    renderThumb={Thumb}
-/>
+<StyledSlider defaultValue={[50, 75]} renderTrack={Track} renderThumb={Thumb} />;
 ```
 
 In some case you may need to programmatically tell the slider to resize, for example if the parent container is resizing independently of the window. Since `v2.0.0` this is handled internally by `ResizeObserver`.
@@ -219,24 +223,18 @@ const StyledContainer = styled.div`
 
 const ResizableSlider = () => (
     <StyledContainer>
-        <StyledSlider
-            defaultValue={[50, 75]}
-            renderTrack={Track}
-            renderThumb={Thumb}
-        />
+        <StyledSlider defaultValue={[50, 75]} renderTrack={Track} renderThumb={Thumb} />
     </StyledContainer>
 );
 
-<ResizableSlider />
+<ResizableSlider />;
 ```
 
 Single slider, applying `ariaLabelledby` to establish association with a label
 
 ```jsx
 <div>
-    <label id="slider-label">
-        React Slider example
-    </label>
+    <label id="slider-label">React Slider example</label>
     <ReactSlider
         ariaLabelledby="slider-label"
         className="horizontal-slider"
@@ -251,12 +249,8 @@ Double slider, applying `ariaLabelledby` as an array to multiple thumb labels
 
 ```jsx
 <div>
-    <label id="first-slider-label">
-        Start slider label
-    </label>
-    <label id="second-slider-label">
-        End slider label
-    </label>
+    <label id="first-slider-label">Start slider label</label>
+    <label id="second-slider-label">End slider label</label>
     <ReactSlider
         className="horizontal-slider"
         thumbClassName="example-thumb"
@@ -268,4 +262,5 @@ Double slider, applying `ariaLabelledby` as an array to multiple thumb labels
         pearling
         minDistance={10}
     />
-</div>
+</div>
+```

styleguide.config.js

@@ -1,16 +1,19 @@
 const path = require('path');
 const { createStyleguideConfig } = require('create-react-styleguide');
 
-module.exports = createStyleguideConfig({
-    getComponentPathLine() {
-        return `import ReactSlider from 'react-slider'`;
+module.exports = createStyleguideConfig(
+    {
+        getComponentPathLine() {
+            return `import ReactSlider from 'react-slider'`;
+        },
+        styleguideComponents: {
+            Wrapper: path.join(__dirname, 'src/styleguidist/ThemeWrapper'),
+        },
+        title: 'react-slider',
+        usageMode: 'expand',
     },
-    styleguideComponents: {
-        Wrapper: path.join(__dirname, 'src/styleguidist/ThemeWrapper'),
-    },
-    title: 'react-slider',
-    usageMode: 'expand',
-}, {
-    packageSection: false,
-    componentsSection: false,
-});
+    {
+        packageSection: false,
+        componentsSection: false,
+    }
+);